[TypeScript] ReactQueryConfigProvider type miss match

[pete-redmond-cko]

I noticed that use can pass the type of error to the ReactQueryProviderConfig interface, however the ReactQueryConfigProvider does not except the TError so it sets the error in config to be Error (the default).

const reactQueryConfig: ReactQueryProviderConfig<AxiosError> = {
  refetchAllOnWindowFocus: false,
  refetchOnWindowFocus: false,
  retry: (failureCount, error) => {
    if (error.response?.status === 404) {
      return false;
    }

    return failureCount > 2;
  },
};

<ReactQueryConfigProvider
  config={reactQueryConfig}
>
      ...
</ReactQueryConfigProvider>

I am getting a type error when trying to use a AxiosError in the config.

Shouldn't the ReactQueryConfigProvider take in the Error Type?

<ReactQueryConfigProvider<AxiosError>
  config={reactQueryConfig}
>
      ...
</ReactQueryConfigProvider>

[thebuilder]

Have you tried in the latest version?

[pete-redmond-cko]

@thebuilder tried 1.5.5 and still getting the same warning

Looking at the typings, the error in config was always fall back to Error because the type of Error isnt passed to ReactQueryProviderConfig

export const ReactQueryConfigProvider: React.ComponentType<{
  config?: ReactQueryProviderConfig
}>

[thebuilder]

I think that should be fine. It expects an instance of the config type, which you are providing.

[pete-redmond-cko]

I think that should be fine. It expects an instance of the config type, which you are providing.

@thebuilder here is a link to the a codesandbox with the error https://codesandbox.io/s/cocky-ride-zg0od

You cant pass the error type to ReactQueryConfigProvider as it doesnt take any generics, ReactQueryProviderConfig does but not the actual provider component

[thebuilder]

You're right. Haven't had to use a generic on JSX before. Not pretty - might wan't to also add documentation for this use case.

But in that case, then yes - this would be the correct way.

<ReactQueryConfigProvider
  <AxiosError>
  config={reactQueryConfig}
>
      ...
</ReactQueryConfigProvider>

[thebuilder]

Rewriting the type into this, should solve it:

export function ReactQueryConfigProvider<TError = Error>(props: {
  config?: ReactQueryProviderConfig<TError>;
  children?: React.ReactNode;
}): React.ReactElement;

[tannerlinsley]

🎉 This issue has been resolved in version 1.5.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[mwmcode]

@pete-redmond-cko has this <ReactQueryConfigProvider<AxiosError> config..>... worked for you?

Is it supposed to override the type of error returned by userQuery and others?

May I ask what form of useQuery you're using? (not sure if it matters, but I cannot see TError being used/inherited

// Object Syntax
export function useQuery<TResult, TKey extends AnyQueryKey, TError = Error>({
  queryKey,
  queryFn,
  config,
}: {
  queryKey: TKey
  queryFn?: QueryFunction<TResult, TKey>
  config?: QueryOptions<TResult, TError>
}): QueryResult<TResult, TError>

[pete-redmond-cko]

@mustafawm yeah it worked. It only overrides the type of Error in ReactQueryProviderConfig. You will still have to pass AxiosError too useQuery.

My use case was to handle retry logic on the config provider so I didnt have to do it on every useQuery, I dont want to retry if the API returns 404.

const reactQueryConfig: ReactQueryProviderConfig<AxiosError> = {
  refetchAllOnWindowFocus: false,
  refetchOnWindowFocus: false,
  retry: (failureCount, error) => {
    if (is404Error(error)) {
      return false;
    }

    return failureCount > 2;
  },
};

<ReactQueryConfigProvider<AxiosError> config={reactQueryConfig}>...<../>

[mwmcode]

Thanks for your quick reply @pete-redmond-cko 🙏. Will start passing error type to useQuerys then.