Error: Field 'category'

[costidotdev]

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

Source lib\actions.ts (38:11) @ async makeGraphQLRequest

36 | const makeGraphQLRequest = async (query: string, variables = {}) => { 37 | try { 38 | return await client.request(query, variables); 39 | } catch (err) { 40 | throw err; 41 | }

The error is at line 38.

[TareqJarwan]

+1

[maeve-du]

I also encountered this issue. When the 'category' is not provided, it will trigger this error. I made the following changes to temporarily avoid the error:

1. In the 'GraphQL > index.ts' file, created a new request called 'allProject' based on 'projectsQuery', just remove the filter option.

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

2. Back to lib > actions.ts, modified the 'fetchAllProjects' function as follows: If there's no 'category', just fetch from 'allProject' instead of 'projectsQuery'.

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

  if (!category) {
    return makeGraphQLRequest(allProject)
  }

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

These changes should help to avoid the error when the 'category' field is not provided, but I'm not sure if there is a better approach.

[ChuksJoshuaa]

This should work. I tried it but I got an error cuz I didn't pass the endcursor variable inside the allProject.

export const fetchAllProjects = (category?: string, endcursor?: string) => {
  client.setHeader("x-api-key", apiKey);
  if (!category) return makeGraphQLRequest(allProject, { endcursor });
  else return makeGraphQLRequest(projectsQuery, { category, endcursor });
}

[jcanning]

I had to do a bit more than @ChuksJoshuaa solution because category for me was showing up as undefined rather than null and as of right now i am still not sure why.

My solution looks like this with just the added All and undefined checks

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

    if (!category || category === undefined || category === "All") return makeGraphQLRequest(projectsQueryAll, { endcursor });
    
    else return makeGraphQLRequest(projectsQuery, { category, endcursor });
}

I added an "All" button for the categories as the default load is all, i thought it would be nice to throw that in.