How to capture Errors in Apollo Consumer when making graphql queries

Question

This is how I am querying my Graphql engine.

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>
  );
};

I have the following code for running Graphql queries. How can I use the same to capture the GraphQL errors. Thank you.

This is how I am accessing the above component :

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

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

Answer 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>
  );
};

We can use catch to send error messages to handleError method using .catch function.