queryClient defaultOptions type

[jkang0408]

type Response<R> = {
  response: R;
  ok: boolean;
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      select: data => {
        if (data.ok) {
          return data.response;
        }
        throw new Error(data.response?.message || 'Fetch ERROR');
      }
    }
  }
});

I want to pass TQueryFnData = Response<R> and TData = Pick<Response<R>, 'response'> .
How can I pass these types to defaultOptions.queries ?

now I got a ts error in select method. about data : TS2571: Object is of type 'unknown'.

[TkDodo]

Can you show what you want to do including the error in a codesandbox?

[jkang0408]

https://codesandbox.io/s/focused-framework-qdtz5?file=/pages/index.tsx
Many thanks. This is what I tried.

how resolve this ts error in select.

[TkDodo]

that's an interesting use for a default select function. most people using fetch do this in a custom wrapper around fetch, but this will also work at runtime. it seems that QueryClient doesn't support passing generics through to the defaultOptions (QueryObserverOptions), so you'd need to use a type assertion. Response<unknown> is likely what you want:

      select: (data) => {
        const responseData = data as Response<unknown>
        if (responseData.ok) {
          return responseData.response;
        }
        throw new Error("Error");
      }

The take-away is that on this level, we have no way of knowing what will be passed into select, so it's most certainly unknown. It depends totally on what each and every queryFn returns, so if you do this, you'd have to be careful that each queryFn really adheres to this. A more safe approach would be also adding a runtime check that additionally type-narrows:

const isResponse = (data: unknown): data is Response<unknown> =>
  Boolean(
    data && typeof data === "object" && "ok" in data && "response" in data
  );

      select: (data) => {
        if (isResponse(data)) {
          if (data.ok) {
            return data.response;
          }
        }

        throw new Error("Error");
      }