按Apollo Client安装指南操作遇400错误：Schema需为GraphQLSchema实例

Hey there, let's work through this problem step by step—this is a super common gotcha when setting up Apollo Client, so don't stress!

First: Fix the Multiple GraphQL Versions Issue #

The error message explicitly calls out conflicting GraphQL versions, and this is almost always the root cause here. Let's tackle that first:

• Check for conflicting versions: Run npm ls graphql (or yarn list graphql if you use Yarn) in your terminal. You’ll see a tree of all packages that depend on GraphQL—look for any entries that have different version numbers.
• Force a single version:
  Add a resolutions field to your package.json to lock GraphQL to the version required by your Apollo Client setup (Apollo Client 3.x typically works with GraphQL v15.x or v16.x):

  "resolutions": {
    "graphql": "^16.6.0"
  }
  

  Then delete your node_modules folder, package-lock.json (or yarn.lock), and run npm install (or yarn install) again.
• Clear cache: Don’t skip this! Run npm cache clean --force or yarn cache clean to make sure no old cached versions stick around.

Next: Fix the "Schema must be an instance of GraphQLSchema" Error #

This usually happens when you’re mixing up client-side and server-side Apollo configurations:

• If you’re connecting to a remote GraphQL server: You don’t need to define a GraphQLSchema on the client at all! The client only needs an HttpLink pointing to your server’s endpoint. Double-check your client setup looks like this:

  import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
  
  const client = new ApolloClient({
    link: new HttpLink({
      uri: 'https://your-graphql-server-url.com/graphql', // Replace with your server's URL
    }),
    cache: new InMemoryCache(),
  });
  

  A common mistake here is accidentally importing server-side GraphQL utilities (like GraphQLSchema) and trying to pass them to the client—don’t do that!
• If you’re using a mock/local schema (like SchemaLink): Make sure you’re generating a valid schema instance with @graphql-tools/schema:

  import { ApolloClient, InMemoryCache, SchemaLink } from '@apollo/client';
  import { makeExecutableSchema } from '@graphql-tools/schema';
  
  // Define your type definitions and resolvers
  const typeDefs = `
    type Query {
      hello: String
    }
  `;
  
  const resolvers = {
    Query: {
      hello: () => 'Hello world!',
    },
  };
  
  // Generate a valid GraphQLSchema instance
  const schema = makeExecutableSchema({ typeDefs, resolvers });
  
  const client = new ApolloClient({
    link: new SchemaLink({ schema }),
    cache: new InMemoryCache(),
  });
  

  Never try to create a GraphQLSchema manually—use the makeExecutableSchema utility to ensure you get a valid instance.

Verify Your Babel Configuration #

Even if you followed the guide, double-check these settings to avoid module loading issues:

• Ensure your .babelrc (or babel.config.json) includes presets for React and ES environments, and no conflicting plugins that break ES module imports:

  {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-transform-runtime",
      "@babel/plugin-proposal-class-properties"
    ]
  }
  

  Avoid plugins that force ES modules to CommonJS unless absolutely necessary—this can cause weird issues with how GraphQL modules are loaded and checked.

Finally: Check Your client.query Call #

A 400 status code often means your query is malformed. Make sure:

• You’re using the gql tag from @apollo/client (not a third-party package):

  import { gql } from '@apollo/client';
  
  client.query({
    query: gql`
      query GetHello {
        hello
      }
    `
  })
  .then(res => console.log(res.data))
  .catch(err => console.error(err));
  

• Your query matches the schema exposed by your server (if using a remote endpoint)—a typo in the query name or field will trigger a 400 error.

内容的提问来源于stack exchange，提问作者Zargoon