Error in grafbase | graphql query, working good on development but generates error on production

Question

I am creating a dribble clone where I am using grafbase for querying my data, but it generates the error on production, it says "category invalid type "null" expected to be "string", but the way I query it, it should allow null too,it working fine on development but on production side it become more stricter, I don’t know how to solve this.

Here is my query:

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

This is my code accessing that data through that query:

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

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

And here is the error I get :

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        hasNextPagen        hasPreviousPagen        startCursorn        endCursorn      }n      edges {n        node {n          titlen          githubUrln          descriptionn          liveSiteUrln          idn          imagen          categoryn          createdBy {n            idn            emailn            namen            avatarUrln          }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/585.js:204:16)
    at async Home (/var/task/.next/server/app/page.js:552: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' +
      '        hasNextPagen' +
      '        hasPreviousPagen' +
      '        startCursorn' +
      '        endCursorn' +
      '      }n' +
      '      edges {n' +
      '        node {n' +
      '          titlen' +
      '          githubUrln' +
      '          descriptionn' +
      '          liveSiteUrln' +
      '          idn' +
      '          imagen' +
      '          categoryn' +
      '          createdBy {n' +
      '            idn' +
      '            emailn' +
      '            namen' +
      '            avatarUrln' +
      '          }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: '3965289046'
}

I tried many other ways through chatgpt & docs, but nothing seems working, I am newbie in grafbase, please let me know if you have info…

Muhammad OwaisMuhammad Owais 292 bronze badges · Accepted Answer · 2023-07-20 11:44:42Z

Finally I solved the issue:
, here is how first you will need to create two queries one for all projects without category option

export const projectsQueryAll = `
query getProjects( $endcursor: String) {
projectSearch(first: 8, after: $endcursor) {
pageInfo {
hasNextPage
hasPreviousPage
startCursor
endCursor
}
....
....
}

and one with category filter

export const projectsQueryWithFilter = `
query getProjects($category: String, $endcursor: String) {
  projectSearch(first: 8, after: $endcursor, filter: {category: {eq: $category}}) {
    pageInfo {
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
.....
....
}

and then in the action.ts you have to change the code like this in the screen shot

Also the most important, make sure to check all the environment variables , in development, in grafbase & in production
I hope you all will find this helpful,
have a great day.

Mustafa RajehMustafa Rajeh 1 · Accepted Answer · 2023-08-19 16:15:06Z

-1

it’s not working, I couldn’t see what I uploaded/projects. did you get to see the projects you uploaded?

answered 1 hour ago

Mustafa Rajeh

1

New contributor

1

This does not provide an answer to the question. You can search for similar questions, or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, ask a new question, and include a link to this one to help provide context. See: Ask questions, get answers, no distractions

– LW001

1 hour ago

Add a comment
|

Error in grafbase | graphql query, working good on development but generates error on production