next.js grafbase出错|graphql查询,在开发中运行良好,但在生产中生成错误

oyt4ldly  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(110)

我正在创建一个dribble克隆,在那里我使用grafbase查询我的数据,但它在生产上生成错误,它说“类别无效类型”null“预期为“字符串”,但我查询它的方式,它应该允许null,它在开发方面工作良好,但在生产方面它变得更加严格,我不知道如何解决这个问题。
以下是我的查询:

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
          }
        }
      }
    }
  }
`;

字符串
这是我通过查询访问数据的代码:

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

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


下面是我得到的错误:

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/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' +
      '        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: '3965289046'
}


我尝试了许多其他的方法通过chatgpt & docs,但似乎没有工作,我是新手在grafbase,请让我知道如果你有信息.阅读更多

e4yzc0pl

e4yzc0pl1#

最后我解决了这个问题:,这里是如何首先您将需要创建两个查询一个为所有项目没有类别选项

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

字符串
另一个带有类别过滤器

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


然后在操作中。ts你必须在屏幕截图中像这样修改代码
同样最重要的是,确保检查所有的环境变量,在开发中,在grafbase中,在生产中,我希望你会发现这对你有帮助,有一个伟大的一天。

相关问题