grafbase 中出现错误 | graphql 查询，在开发中运行良好，但在生产中生成错误

Question

我正在创建一个运球克隆，我使用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和文档尝试了很多其他方法，但似乎没有任何效果，我是grafbase的新手，如果您有信息，请告诉我...

Answer 1

最后我解决了这个问题： ，这是您首先需要创建两个查询的方法，一个查询适用于没有类别选项的所有项目

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
    }
.....
....
}

然后在action.ts中你必须像屏幕截图中这样更改代码

同样最重要的是，确保检查开发中、grafbase 和生产中的所有环境变量 我希望大家会觉得这有帮助， 祝你有美好的一天。

Answer 2

它不起作用，我看不到我上传的内容/项目。您看到您上传的项目了吗？