Как регистрировать ошибки в Apollo Consumer при выполнении запросов в GraphQL - PullRequest
Новая
       35

Как регистрировать ошибки в Apollo Consumer при выполнении запросов в GraphQL

0 голосов
/ 02 ноября 2019

Вот как я опрашиваю свой движок 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>
  );

1 Ответ

0 голосов
/ 12 ноября 2019 
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 с помощью функции .catch.

...