Unhandled Runtime Error

[lazarevkristijan]

Error: 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":{}}}

51 | const makeGraphQLRequest = async (query: string, variables = {}) => { 52 | try {

53 | return await client.request(query, variables) | ^ 54 | } catch (err) { 55 | throw err 56 | }

It says that from category in lib/actions.ts from the makeGraphLRequest is returning a null, and expecting a string? Any solutions?

[Ondrej89]

Error: 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":{}}}

51 | const makeGraphQLRequest = async (query: string, variables = {}) => { 52 | try {

53 | return await client.request(query, variables) | ^ 54 | } catch (err) { 55 | throw err 56 | }

It says that from category in lib/actions.ts from the makeGraphLRequest is returning a null, and expecting a string? Any solutions?

Is this in production or in development enviroment? if in development just change const isProduction = process.env.NODE_ENV !== 'production'; to const isProduction = process.env.NODE_ENV === 'production'; I have this error in production on vercel I tried to change api keys and url to grafbase tried to hard code secrets into code it self nothing works in production form me ...

[lazarevkristijan]

Error: 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":{}}} 51 | const makeGraphQLRequest = async (query: string, variables = {}) => { 52 | try {

53 | return await client.request(query, variables) | ^ 54 | } catch (err) { 55 | throw err 56 | }

It says that from category in lib/actions.ts from the makeGraphLRequest is returning a null, and expecting a string? Any solutions?

Is this in production or in development enviroment? if in development just change const isProduction = process.env.NODE_ENV !== 'production'; to const isProduction = process.env.NODE_ENV === 'production'; I have this error in production on vercel I tried to change api keys and url to grafbase tried to hard code secrets into code it self nothing works in production form me ...

Thanks for the reply Ondrej, as it seems I already had it to triple equals, this is still in development it didn't want to work I cant upload it to production without having it function in dev.. Thanks again

[ProgrammerOwais]

I am having the same issue, couldn't solve it, if you gys cover it , plz let me know, it just got too much time but can't figure it out.

[lazarevkristijan]

I am having the same issue, couldn't solve it, if you gys cover it , plz let me know, it just got too much time but can't figure it out.

Yeah, i moved on from it don’t wanna say I am a quitter, and I think using a week to find out a bug will not be as good as continuing to code for that 1 week..

[Ondrej89]

I am having the same issue, couldn't solve it, if you gys cover it , plz let me know, it just got too much time but can't figure it out.

I used this in lib/actions.ts but on home page it displays no projects so I codet so that on hompage Frontpage category was selected by default. And yeah with this I wont make any changes to this project, for me it is done, on to next one :) export const fetchAllProjects = ( category?: string | null, endcursor?: string | null ) => { client.setHeader("x-api-key", apiKey);

const validCategory = category ?? ''

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

};

[ProgrammerOwais]

I have solved it , 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.

[lazarevkristijan]

Thank you @Ondrej89 & @ProgrammerOwais I see that both can work in this scenario! good job!