Search code examples
next.jsgraphqlnullvercel.env

Why am I recieving a graphQL Client Error when deploying to vercel?

I am trying to deploy my Next.js app to Vercel and the deployment/build is 'successful' but if I visit the site, it states that there was an application error.

Application Error when deploying to Vercel

When I check the console it states

Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.

When I check the Vercel deployment logs it shows a successful deployment, however the GET requests return this error

- info Loaded env from /var/task/.env
ClientError: Field 'category': Error { message: "Field 'category': Error { message: \"invalid type: null, expected a string\", extensions: None }", extensions: None }: {"response":{"data":null,"errors":[{"message":"Field 'category': Error { message: \"Field 'category': Error { message: \\\"invalid type: null, expected a string\\\", extensions: None }\", extensions: None }","locations":[{"line":3,"column":5}],"path":["projectSearch"]}],"status":200,"headers":{}},"request":{"query":"\n  query getProjects($category: String, $endcursor: String) {\n    projectSearch(first: 8, after: $endcursor, filter: {category: {eq: $category}}) {\n      pageInfo {\n        hasNextPage\n        hasPreviousPage\n        startCursor\n        endCursor\n      }\n      edges {\n        node {\n          title\n          githubUrl\n          description\n          liveSiteUrl\n          id\n          image\n          category\n          createdBy {\n            id\n            email\n            name\n            avatarUrl\n          }\n        }\n      }\n    }\n  }\n","variables":{}}}
    at makeRequest (/var/task/node_modules/graphql-request/build/cjs/index.js:310:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async makeGraphQLRequest (/var/task/.next/server/chunks/147.js:191:16)
    at async Home (/var/task/.next/server/app/page.js:607:18) {
  response: {
    data: null,
    errors: [ [Object] ],
    status: 200,
    headers: Headers { [Symbol(map)]: [Object: null prototype] }
  },
  request: {
    query: '\n' +
      '  query getProjects($category: String, $endcursor: String) {\n' +
      '    projectSearch(first: 8, after: $endcursor, filter: {category: {eq: $category}}) {\n' +
      '      pageInfo {\n' +
      '        hasNextPage\n' +
      '        hasPreviousPage\n' +
      '        startCursor\n' +
      '        endCursor\n' +
      '      }\n' +
      '      edges {\n' +
      '        node {\n' +
      '          title\n' +
      '          githubUrl\n' +
      '          description\n' +
      '          liveSiteUrl\n' +
      '          id\n' +
      '          image\n' +
      '          category\n' +
      '          createdBy {\n' +
      '            id\n' +
      '            email\n' +
      '            name\n' +
      '            avatarUrl\n' +
      '          }\n' +
      '        }\n' +
      '      }\n' +
      '    }\n' +
      '  }\n',
    variables: { category: undefined, endcursor: undefined }
  }
}
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '1254291344'
}

This is surprising as the entire project works locally for me when I do npm run dev . Is this happening because there are currently no 'projects' to look for in the graphQL so it is returning an error when trying to search for a category and receives null? Or is my .ENV variables screwed up somehow?

grafbase.config.ts:

import { g, config, auth } from "@grafbase/sdk";

// @ts-ignore
const User = g
  .model("User", {
    name: g.string().length({ min: 2, max: 100 }),
    email: g.string().unique(),
    avatarUrl: g.url(),
    description: g.string().length({ min: 2, max: 1000 }).optional(),
    githubUrl: g.url().optional(),
    linkedinUrl: g.url().optional(),
    projects: g
      .relation(() => Project)
      .list()
      .optional(),
  })
  .auth((rules) => {
    rules.public().read();
  });

// @ts-ignore
const Project = g
  .model("Project", {
    title: g.string().length({ min: 3 }),
    description: g.string(),
    image: g.url(),
    liveSiteUrl: g.url(),
    githubUrl: g.url(),
    category: g.string().search(),
    createdBy: g.relation(() => User),
  })
  .auth((rules) => {
    rules.public().read();
    rules.private().create().delete().update();
  });

const jwt = auth.JWT({
  issuer: "grafbase",
  secret: g.env("NEXTAUTH_SECRET"),
});

export default config({
  schema: g,
  auth: {
    providers: [jwt],
    rules: (rules) => rules.private(),
  },
});

I have tested my project locally with all the same .ENV variables except the NEXTAUTH_URL to reflect the new Vercel URL instead of localhost:3000. I have made sure my Graf base deployment is successful and the environment variables are correct a successful grafbase deployment of my project I have also checked my cloudinary, google cloud, and NEXTAUTH .env variables to ensure they are correct and within the Vercel deployment. I've ensured that my google cloud authorized URL's are correct and the .env variables needed are correct.

Not sure what other context I can add or if there is anything else I should check for, it may be the null categories but not sure how to fix and why it works locally but not in production. Here is my github just in case. github

Solution

  • The only way I found to prevent this error, is by passing a list of all available categoryFilters to the GraphQL Query, if no category is selected.

    This way the Homepage will display projects of all available project categories, when no specific category is selected.

    Rename $category to $categories. Type should be a Required list of strings.

    export const projectsQuery = `
  query getProjects($categories: [String!], $endcursor: String) {
    projectSearch(first: 8, after: $endcursor, filter:  {category: {in: $categories}}) {
      pageInfo {
        hasNextPage
        hasPreviousPage
        startCursor
        endCursor
      }
      edges {
        node {
          title
          githubUrl
          description
          liveSiteUrl
          id
          image
          category
          createdBy {
            id
            email
            name
            avatarUrl
          }
        }
      }
    }
  }
`;

    Create the List of Categories, if no category was selected.

    export const fetchAllProjects = (category?: string | null, endcursor?: string | null) => {
    client.setHeader("x-api-key", apiKey);

    const categories = category == null ? categoryFilters : [category];

    return makeGraphQLRequest(projectsQuery, { categories, endcursor });
};