node.js - Graphql Bad Request on page load

Question

Hello Everyone and Happy Holidays,

I'm building a website with KeystoneJS and NextJS. I have added Apollo Client in between.

However, I'm having an issue with Apollo Client now. I have tried different places to put in as well but the result was the same, Anyway here is my _app.tsx file

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;

On page load on every page, I get this 400 Bad request Error says

{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"

but I don't request list queries at all.

The first 2 API calls are 204 last one is 200 and I get the query fine. My assumption is this is happening because of SSR but I need a solution. I tried to pass by with loading and stuff as well but it didn't work.

And here is my KeystoneJS setup.

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/' }),
  ],
};

Backend is running on localhost:3000 The frontend is running on localhost:7777

Thanks in advance.

Happy Holidays

Answer 1

Found the reason for this error, Keystoneprovider was creating this issue for some reason. If anybody knows the reason, it would be nice to know the reason.