onError Import 未在 Apollo 中使用

Question

我正在尝试使用 Apollo 和 Graphql 处理我的 React Native with Expo 应用程序上的错误。问题是在我的 apolloServices.js 中我试图使用 onError 函数，尽管我尝试了 apollo-link-error 和 @apollo/client/link/error 导入仍然是灰色的。它在 ApolloClient 中的功能。

本机反应：0.63.2 @阿波罗客户端：3.3.11 阿波罗-link-错误：1.1.13

// Apollo resources
import { HttpLink } from 'apollo-link-http';
import { ApolloClient } from '@apollo/client'; // Tried putting onError here
import { onError } from 'apollo-link-error'; // And here
//import { onError } from '@apollo/client/link/error'; // Also here
import {
  InMemoryCache,
  defaultDataIdFromObject,
} from 'apollo-cache-inmemory';
import { setContext } from 'apollo-link-context';

/* Constants */
import { KEY_TOKEN } from '../constants/constants';

/**
 * @name ApolloServices
 * @description
 *   The Apollo Client's instance. App.js uses it to connect to graphql
 * @constant httpLink HttpLink Object. The url to connect the graphql
 * @constant defaultOPtions Object. Default options for connection
 * @constant authLink
 */

const httpLink = new HttpLink({
  uri: 'workingUri.com',
});

const defaultOptions = {
  watchQuery: {
    fetchPolicy: 'no-cache',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'no-cache',
    errorPolicy: 'all',
  },
};

//Create link with auth header
const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  return AsyncStorage?.getItem(KEY_TOKEN).then((token) => {
    // return the headers to the context so httpLink can read them
    return {
      headers: {
        ...headers,
        'auth-token': token ? token : '',
      },
    };
  });
});

export default new ApolloClient({
  /* ON ERROR FUNCTION HERE*/
  onError: (graphQLErrors, networkError) => {
    if (graphQLErrors)
      graphQLErrors.map(
        ({ message, locations, path }) =>
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
          ),
      );

    if (networkError) {
      console.log(`[Network error]: ${networkError}`);
    }
  },
  cache: new InMemoryCache(),
  defaultOptions: defaultOptions,
  link: authLink.concat(httpLink),

  request: (operation) => {
    operation.setContext({
      headers: {
        'auth-token': token ? token : '',
      },
    });
  },
});

除此之外，应用程序运行完美，我想要的只是处理 graphql 和网络错误

Answer 1

最好的解决方案是使用这种方法


const errorControl =  onError(({ networkError, graphQLErrors }) => {
        if (graphQLErrors) {
            graphQLErrors.map(({ message, locations, path }) =>
                console.log(
                    " [GraphQL error]: Message", message, ", Location: ", locations, ", Path: ", path)
            );
        }
        if (networkError) {
            console.log(" [Network error]:", networkError)
        };

    });

export default new ApolloClient({

    cache: new InMemoryCache(),
    defaultOptions: defaultOptions,
    link: errorControl.concat(authLink.concat(httpLink)),

        headers: {
            authorization: token ? token : '',
        },
  });

onError Import 未在 Apollo 中使用

onError Import not being used in Apollo

error-handling

apollo

graphql

react-native

apollo-client