node.js - 页面加载时的 Graphql 错误请求

Question

大家好，节日快乐，

我正在使用 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 Error 说

{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 上运行

提前致谢。

节日快乐

Answer 1

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

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

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

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