Apollo Client配置问题：graphQLErrors为空数组的解决方法

Hey, let's break down why this is happening and fix it:

Why This Happens #

Your Apollo Server returns a 400 status code when there's a GraphQL error (like an invalid field in your query), and Apollo Link HTTP treats any non-2xx status code as a network error by default. Instead of parsing the errors field from the response body into graphQLErrors, it wraps the whole thing into networkError.result.errors, leaving graphQLErrors empty.

Solution 1: Make Apollo Server Return 2xx Status Codes #

GraphQL doesn't require non-2xx status codes for errors, so you can configure your Apollo Server to always return 200, even when there are GraphQL errors. This lets Apollo Client properly parse the errors into graphQLErrors.

Update your apollo-server-express setup:

const { ApolloServer } = require('apollo-server-express');

const server = new ApolloServer({
  typeDefs,
  resolvers,
  formatResponse: (response, context) => {
    // Force 200 status code regardless of errors
    context.response.status = 200;
    return response;
  },
});

Solution 2: Customize Apollo Client's Fetch to Handle 400s #

If you can't modify the server, tweak your client's fetch function to trick Apollo Link HTTP into treating 400 responses as "successful" (so it parses the GraphQL errors instead of throwing a network error).

Update your Apollo Client configuration:

const { ApolloClient } = require('apollo-client')
const { ApolloLink } = require('apollo-link')
const { HttpLink } = require('apollo-link-http')
const { onError } = require('apollo-link-error')
const { InMemoryCache } = require('apollo-cache-inmemory')

// Custom fetch that marks 400 responses as "ok"
const customFetch = async (uri, options) => {
  const response = await fetch(uri, options);
  // Create a new Response object with ok: true to bypass Apollo's network error check
  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: response.headers,
    ok: true,
  });
};

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.map(({ message, locations, path }) => 
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(locations)}, Path: ${path}`,
      ),
    )
  }
  if (networkError) console.log(`[Network error]: ${networkError}`)
})

const middleware = (req, ignored_res, next) => {
  const client = new ApolloClient({
    link: ApolloLink.from([
      errorLink, 
      new HttpLink({ 
        uri:'http://somegraphqlserver.com', 
        fetch: customFetch // Use our custom fetch
      })
    ]),
    cache: new InMemoryCache(),
  })
  req.GQLClient = client
  return next()
}

module.exports = middleware

What Happens Next #

After making either change, your error.graphQLErrors array will contain the actual GraphQL errors, and your onError link will log them as expected. No more digging into networkError.result.errors!

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