Wrong type definition for responseMiddleware about graphql-request

[nikolay-emrikh-stenn]

I've created function to determine if thrown error is a graphql-endpoint error (isGraphQLEndpointError):

export const isErrorWithResponse = (error: Error): error is Error & { response: GraphQLClientResponse<unknown> } =>
    error.hasOwnProperty('response');

export const isGraphQLEndpointError = (error: unknown): error is Error & { response: GraphQLClientResponse<unknown> } =>
    error instanceof Error && isErrorWithResponse(error) && !!error.response.errors?.length;

And use it in react-query client to check whenever it needs to be retried or not, like this:

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            retry: (retryCount, error) => {
                if (isGraphQLEndpointError(error)) {
                    // graphql endpoint is available and the problem occurred during the execution of the request
                    // and not due to infrastructure problems on the backend or network problems of the client
                    // so we don't need to retry as result will be same
                    return false;
                }
                return retryCount < 3;
            },
        },
    },
});

And in responseMiddleware i show toast with message:

// wrong type of argument
// it's not `GraphQLClientResponse<unknown> | Error`
// but `Error & { response: GraphQLClientResponse<unknown> }`
responseMiddleware: async (res) => {
    if (res instanceof Error) {
        if (isErrorWithResponse(res)) {
            res.response.errors?.forEach((error) => enqueueError(error.message));
        } else {
            enqueueError(res.message);
        }
    }
},

[nikolay-emrikh-stenn]

By the way _response is an instance of Error so can be checked with instanceof operator

const isErrorWithResponse = (error: Error): error is Error & { response: GraphQLClientResponse<unknown> } =>
    error.hasOwnProperty('response');

responseMiddleware: async (res) => {
    if (res instanceof Error) {
        if (isErrorWithResponse(res)) {
           res.response.errors?.map(...)
        } else {
            // just error
        }
    }
},

[d-lasagno]

Thank you for the clarification. So if I understand this correctly, when the response it's a graphql error, _response is an instance of Error? For http errors it still is an error, but doesn't have the response field, right?

[nikolay-emrikh-stenn]

As i see it's always an instance of Error
But when it's graphql endpoint error theres additional response.errors field

But you pointed out correctly that types are wrong

So argument in responseMiddleware is not of type GraphQLClientResponse<unknown> | Error but of type Error & { response: GraphQLClientResponse<unknown> }

[jonkoops]

I don't think this is actually a bug, the response argument is one of three types:

• GraphQLClientResponse — A valid response object containing the retrieved data.
• ClientError — An error response that contains information about the underlying request and response.
• Error — A generic error caused by something else than the network layer.

Putting all of that together you could write your error handling as follows:

const graphQLClient = new GraphQLClient(endpoint, {
  responseMiddleware(response) {
    if (response instanceof ClientError) {
      console.error('A client error occurred:', response);
      return;
    }
    
    if (response instanceof Error) {
      console.error('Some other error occurred:', response);
      return;
    }

    console.log('Got a valid response', response);
  }
});