TanStack Query: Surface custom errors for useQuery()

[ryan-rushton]

Description

In setting up auth for my application I have noticed that my explicitly defined auth errors are surfaced in queries, but they are in mutations.

This should be solvable as there is a UseQueryOptions type that takes custom errors similar to UseMutationOptions

From the react query types

interface UseQueryOptions<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey> extends OmitKeyof<UseBaseQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>, 'suspense'> {

Examples

Post spec

"/api/auth/{provider}/authenticate": {
      "post": {
        "parameters": [
          {
            "name": "provider",
            "in": "path",
            "description": "The name of the auth provider, should be 'steam'",
            "required": true,
            "schema": {
              "type": "string"
            }
          }
        ],
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/AuthProviderAuthenticationRequest"
              }
            }
          }
        },
        "responses": {
          "200": {
            "description": "OK"
          },
          "401": {
            "description": "Unauthorized Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/UnauthorizedError"
                }
              }
            }
          },
          "500": {
            "description": "Server Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/GeneralError"
                }
              }
            }
          }
        }
      }
    },

Generated post

Also note the query here doesn't surface them

export const postApiAuthByProviderAuthenticateOptions = (options: Options<PostApiAuthByProviderAuthenticateData>) => {
  return queryOptions({
    queryFn: async ({ queryKey, signal }) => {
      const { data } = await postApiAuthByProviderAuthenticate({
        ...options,
        ...queryKey[0],
        signal,
        throwOnError: true,
      });
      return data;
    },
    queryKey: postApiAuthByProviderAuthenticateQueryKey(options),
  });
};

export const postApiAuthByProviderAuthenticateMutation = (
  options?: Partial<Options<PostApiAuthByProviderAuthenticateData>>,
) => {
  const mutationOptions: UseMutationOptions<
    unknown,
    AxiosError<PostApiAuthByProviderAuthenticateError>,
    Options<PostApiAuthByProviderAuthenticateData>
  > = {
    mutationFn: async (localOptions) => {
      const { data } = await postApiAuthByProviderAuthenticate({
        ...options,
        ...localOptions,
        throwOnError: true,
      });
      return data;
    },
  };
  return mutationOptions;
};

Get spec

"/api/user": {
      "get": {
        "security": [{ "BearerTokenCookie": [] }],
        "responses": {
          "200": {
            "description": "OK",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/GetUserResponse"
                }
              }
            }
          },
          "401": {
            "description": "Unauthorized Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/UnauthorizedError"
                }
              }
            }
          },
          "500": {
            "description": "Server Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/GeneralError"
                }
              }
            }
          }
        }
      }
    },

Generated get

export const getApiUserOptions = (options?: Options<GetApiUserData>) => {
  return queryOptions({
    queryFn: async ({ queryKey, signal }) => {
      const { data } = await getApiUser({
        ...options,
        ...queryKey[0],
        signal,
        throwOnError: true,
      });
      return data;
    },
    queryKey: getApiUserQueryKey(options),
  });
};

[mrlubos]

Thanks Ryan, this is a completely valid request, will fix

[ryan-rushton]

Thanks mate! I might have a go at some issues when I become more familiar but I've just started using it on a hobby project 😁