进行 graphql 查询时如何在 Apollo Consumer 中捕获错误答案

【问题标题】：How to capture Errors in Apollo Consumer when making graphql queries进行 graphql 查询时如何在 Apollo Consumer 中捕获错误
【发布时间】：2019-11-12 05:12:59
【问题描述】：

这就是我查询 Graphql 引擎的方式。

export GraphQLWrapper <TData, TParam = {}>({
  query,
  extractData,
  children,
  queryVariables,
  skip,
}: AsyncWrapperProps<TData, TParam>) => {
  return (
    <ApolloConsumer>
      {client => {
        const loadOptions = (
          searchString: string,
        ): Promise<SelectOptionType[]> =>
          skip
            ? Promise.resolve([])
            : client
                .query<
                  TData,
                  | AsyncSelectSearchVariables
                  | (AsyncSelectSearchVariables & TParam)
                >({
                  query,
                  variables: {
                    search: `${searchString || ""}%`,
                    ...queryVariables,
                  },
                })
                .then(extractData);
        return <div>{children(loadOptions)}</div>;
      }}
    </ApolloConsumer>
  );
};

我有以下代码用于运行 Graphql 查询。我如何使用它来捕获 GraphQL 错误。谢谢你。

这就是我访问上述组件的方式：

const extractData = ({ data }: ApolloQueryResult<AccountData>) =>
  data && data.vitm_account ? data.vitm_account : [];

  return (
    <GraphQLWrapper query={ACCOUNT_NAME_QUERY} extractData={extractData}>
      {accountSelect}
    </GraphQLWrapper>
  );

【问题讨论】：

标签： reactjs graphql material-ui react-apollo apollo-boost

【解决方案1】：

const setError = useContext(ErrorContext);

  const handleError = (error: ApolloError) => {
    setError(error);
    return [];
  };

  return (
    <ApolloConsumer>
      {client => {
        const loadOptions = (
          searchString: string,
        ): Promise<SelectOptionType[]> =>
          skip
            ? Promise.resolve([])
            : client
                .query<
                  TData,
                  | AsyncSelectSearchVariables
                  | (AsyncSelectSearchVariables & TParam)
                >({
                  query,
                  variables: {
                    search: `${searchString || ""}%`,
                    ...queryVariables,
                  },
                })
                .then(extractData)
                .catch(handleError);
        return <div>{children(loadOptions)}</div>;
      }}
    </ApolloConsumer>
  );
};

我们可以使用catch函数将错误消息发送到handleError方法。

【讨论】：