next.js 为什么我在部署到vercel时收到graphQL客户端错误?

x6492ojm  于 2023-08-04  发布在  其他
关注(0)|答案(2)|浏览(121)

我正在尝试将我的Next.js应用部署到Vercel,部署/构建“成功”,但如果我访问该网站,它会指出存在应用程序错误。
x1c 0d1x的数据
当我检查控制台时它显示
错误:服务器组件呈现中发生错误。在生产构建中省略了特定的消息,以避免泄漏敏感的详细信息。此错误示例中包含摘要属性,它可以提供有关错误性质的其他详细信息。
当我检查Vercel部署日志时,它显示部署成功,但是GET请求返回此错误

- info Loaded env from /var/task/.env
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/147.js:191:16)
    at async Home (/var/task/.next/server/app/page.js:607: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: '1254291344'
}

字符串
这是令人惊讶的,因为当我执行npm run dev时,整个项目都在本地工作。发生这种情况是因为目前在graphQL中没有要查找的“项目”,所以当尝试搜索类别时返回错误并接收null吗?还是我的.ENV变量搞砸了?
grafbase.config.ts:

import { g, config, auth } from "@grafbase/sdk";

// @ts-ignore
const User = g
  .model("User", {
    name: g.string().length({ min: 2, max: 100 }),
    email: g.string().unique(),
    avatarUrl: g.url(),
    description: g.string().length({ min: 2, max: 1000 }).optional(),
    githubUrl: g.url().optional(),
    linkedinUrl: g.url().optional(),
    projects: g
      .relation(() => Project)
      .list()
      .optional(),
  })
  .auth((rules) => {
    rules.public().read();
  });

// @ts-ignore
const Project = g
  .model("Project", {
    title: g.string().length({ min: 3 }),
    description: g.string(),
    image: g.url(),
    liveSiteUrl: g.url(),
    githubUrl: g.url(),
    category: g.string().search(),
    createdBy: g.relation(() => User),
  })
  .auth((rules) => {
    rules.public().read();
    rules.private().create().delete().update();
  });

const jwt = auth.JWT({
  issuer: "grafbase",
  secret: g.env("NEXTAUTH_SECRET"),
});

export default config({
  schema: g,
  auth: {
    providers: [jwt],
    rules: (rules) => rules.private(),
  },
});


我已经在本地测试了我的项目,除了NEXTAUTH_URL之外,所有相同的.ENV变量都反映了新的Vercel URL,而不是localhost:3000。我已经确保我的Graf base部署是成功的,环境变量是正确的

我还检查了我的cloudinary,google cloud和NEXTAUTH .env变量,以确保它们是正确的,并在Vercel部署内。我已经确保我的谷歌云授权URL是正确的,所需的.env变量是正确的。
不确定我可以添加什么其他上下文,或者是否有任何其他我应该检查,它可能是空类别,但不确定如何修复,以及为什么它可以在本地工作,但不能在生产。这是我的github以防万一。github

lyr7nygr

lyr7nygr1#

我发现防止这个错误的唯一方法是,如果没有选择任何类别,则将所有可用的categoryFilters的列表传递给GraphQL查询。
这样,当没有选择特定类别时,主页将显示所有可用项目类别的项目。

将$category重命名为$categories。类型应为必填字符串列表。

export const projectsQuery = `
  query getProjects($categories: [String!], $endcursor: String) {
    projectSearch(first: 8, after: $endcursor, filter:  {category: {in: $categories}}) {
      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);

    const categories = category == null ? categoryFilters : [category];

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

fcy6dtqo

fcy6dtqo2#

我在Vercel上部署它时遇到了同样的错误。
我发现防止类别错误的唯一方法是向类别添加一个空字符串。
$category:String =“",$endcursor:字符串)
此方法允许您部署站点。
具有类别的项目不会显示在主页上。只有没有类别的项目才会显示在主页上。但是,当您选择特定类别时,将显示相关项目。

相关问题