页面加载时的 Graphql 错误请求

如何解决页面加载时的 Graphql 错误请求

大家好，节日快乐，

我正在用 keystonejs 和 NextJS 构建一个网站。我在两者之间添加了 Apollo Client。

但是，我现在遇到了 Apollo Client 的问题。我也尝试了不同的地方，但结果是一样的，无论如何这是我的 _app.tsx 文件

import { useReducer } from "react";
import { useRouter } from "next/router";
import { ThemeProvider } from "styled-components";

import { HttpLink } from "apollo-link-http";
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { Query,KeystoneProvider } from "@keystonejs/apollo-helpers";
import { ApolloProvider,gql } from "@apollo/client";

import { primaryTheme } from "../styles/theme";
import GlobalStyle from "../styles/global";

import { initialState,globalReducer } from "../context/reducer";

import Meta from "../components/global/Meta";
import { Header } from "../components/global/Header";
import { globalContext } from "../context/contex";
import Footer from "../components/global/Footer";
import Loading from "../components/global/Loading";

const client = new ApolloClient({
  ssrMode: true,cache: new InMemoryCache(),link: new HttpLink({
    uri: process.env.NEXT_PUBLIC_API_URL,fetchOptions: {
      mode: 'cors'
     },}),});


const QUERY = gql`
query {
  allOperations{
    id
    name
  }
}
`

const MyApp = ({ Component,pageProps }) => {
  const [store,dispatch] = useReducer(globalReducer,initialState);
  const router = useRouter();

  return (
    <ApolloProvider client={client}>
      <KeystoneProvider>

        <ThemeProvider theme={primaryTheme}>

          <Meta />
          {router.route !== "/" && <Header />}
          <Query
            query={QUERY}
          >
          {({ loading,data }) => {
            console.log(data);
            
            if(loading){ 
              return <Loading /> 
            } else { 

              return <Component {...pageProps} />
        }}}
          </Query>
          <Footer />
          <GlobalStyle />
        </ThemeProvider>
      </KeystoneProvider>
    </ApolloProvider>
  );
};


export default MyApp;

在每个页面的页面加载时，我收到了这个 400 Bad request 错误说

{errors: [{,…}]}
errors: [{,…}]
0: {,…}
extensions: {code: "GRAPHQL_VALIDATION_Failed",exception: {stacktrace: [,…]}}
code: "GRAPHQL_VALIDATION_Failed"
exception: {stacktrace: [,…]}
stacktrace: [,…]
0: "GraphQLError: Field "queries" of type "_ListQueries" must have a selection of subfields. Did you mean "queries { ... }"?"
1: "    at Object.Field (/Users/artticfox/Desktop/Work/frank/backend/node_modules/graphql/validation/rules/ScalarLeafsRule.js:40:31)"
2: "    at Object.enter (/Users/artticfox/Desktop/Work/frank/backend/node_modules/graphql/language/visitor.js:323:29)"
3: "    at Object.enter (/Users/artticfox/Desktop/Work/frank/backend/node_modules/graphql/utilities/TypeInfo.js:370:25)"
4: "    at visit (/Users/artticfox/Desktop/Work/frank/backend/node_modules/graphql/language/visitor.js:243:26)"
5: "    at Object.validate (/Users/artticfox/Desktop/Work/frank/backend/node_modules/graphql/validation/validate.js:69:24)"
6: "    at validate (/Users/artticfox/Desktop/Work/frank/backend/node_modules/apollo-server-core/dist/requestPipeline.js:221:34)"
7: "    at Object.<anonymous> (/Users/artticfox/Desktop/Work/frank/backend/node_modules/apollo-server-core/dist/requestPipeline.js:118:42)"
8: "    at Generator.next (<anonymous>)"
9: "    at fulfilled (/Users/artticfox/Desktop/Work/frank/backend/node_modules/apollo-server-core/dist/requestPipeline.js:5:58)"
10: "    at runMicrotasks (<anonymous>)"
11: "    at processticksAndRejections (internal/process/task_queues.js:93:5)"
locations: [{line: 5,column: 7}]
0: {line: 5,column: 7}
column: 7
line: 5
message: "Field "queries" of type "_ListQueries" must have a selection of subfields. Did you mean "queries { ... }"?"
name: "ValidationError"
uid: "ckjbkc1j9001qng0d2itof7d9"

但我根本不请求列表查询。

前 2 个 API 调用是 204，最后一个是 200，我得到了很好的查询。我的假设是由于 SSR 而发生这种情况，但我需要一个解决方案。我也尝试过加载和其他东西，但没有用。

这是我的 keystonejs 设置。

const { Keystone } = require("@keystonejs/keystone");
const { GraphQLApp } = require("@keystonejs/app-graphql");
const { AdminUIApp } = require("@keystonejs/app-admin-ui");
const { MongooseAdapter: Adapter } = require("@keystonejs/adapter-mongoose");
const { PasswordAuthStrategy } = require("@keystonejs/auth-password");
const { NextApp } = require('@keystonejs/app-next');
require("dotenv").config();
const OperationSchema = require("./lists/Operation.ts");
const UserSchema = require("./lists/User.ts");

const PROJECT_NAME = "frank";
const adapterConfig = {
  mongoUri: process.env.DATABASE,};

/**
 * You've got a new keystonejs Project! Things you might want to do next:
 * - Add adapter config options (See: https://keystonejs.com/keystonejs/adapter-mongoose/)
 * - Select configure access control and authentication (See: https://keystonejs.com/api/access-control)
 */

const keystone = new Keystone({
  adapter: new Adapter(adapterConfig),});

keystone.createList("Operation",OperationSchema);
keystone.createList("User",UserSchema);

const authStrategy = keystone.createAuthStrategy({
  type: PasswordAuthStrategy,list: "User",config: {
    identityField: "username",secretField: "password",},});

module.exports = {
  keystone,apps: [
    new GraphQLApp(),new AdminUIApp({ name: PROJECT_NAME,enableDefaultRoute: false }),new NextApp({ dir: '../frontend/' }),],};

后端在 localhost:3000 上运行前端运行在 localhost:7777

提前致谢。

节日快乐

解决方法

我遇到了同样的问题，并找到了解决方法。

该错误是由@keystonejs/apollo-helpers 中过时的 GraphQL 查询引起的。您可以通过更新 dist 目录中的代码并更新包含 META_QUERY 变量的所有文件以包含缺少的查询子字段。

query ListMeta {
  _ksListsMeta {
    schema {
      type
      queries {
        item
        list
        meta
        __typename
      }
      relatedFields {
        type
        fields
      }
    }
  }
}

请记住，当重新安装/更新@keystonejs/apollo-helpers 软件包时，此解决方法将不起作用。

找到此错误的原因，Keystoneprovider 出于某种原因创建了此问题。如果有人知道原因，最好知道原因。

页面加载时的 Graphql 错误请求

如何解决页面加载时的 Graphql 错误请求

解决方法

相关推荐