v3 is it expected following the simple example in the docs with fetch causes TS error?

[michaelaflores]

When following the v3 "basic" example, replacing the use of Axios with fetch results in a TS issue where error is of type unknown (I assume actually using Axios works here).

import { useQuery } from 'react-query';

const getPopularDataById = async (id: string) => {
  const requestUrl =
    process.env.NEXT_PUBLIC_API_URL + `/session/company/popular/${id}`;
  const response = await fetch(requestUrl);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function usePopularData(companyId: string) {
  return useQuery(
    ["mostPopular", companyId],
    () => getPopularDataById(companyId),
    {
      enabled: !!companyId,
    },
  );
}

function DashboardController() {
  const companyId = '1';
  const { isLoading, isError, data, error } = usePopularData(companyId);
  if (isLoading) return <p>Loading...</p>;

// TS error: Object is of type 'unknown'
  if (isError) return <p>Error: {error.message}</p>;
  return (
    <div className="mt-20 text-black">
      <h1>Dashboard test</h1>
      <p>test</p>
    </div>
  );
}

export default DashboardController;

I'm curious if this is expected when using fetch and following the examples in the docs?

This is resolved by providing a type in the second argument to the useQuery generic but I was wondering why the docs by default don't mention anything other than that a custom hook must specify the error type, when this is also true when just using useQuery directly as the docs show.

i..e this example has the same error

function DashboardController() {
  const companyId = '1';
  const { isLoading, isError, data, error } = usePopularData(companyId);
  if (isLoading) return <p>Loading...</p>;

// TS error: Object is of type 'unknown'
  if (isError) return <p>Error: {error.message}</p>;
  return (
function DashboardController() {
  const companyId = '1';
  const { isLoading, isError, data, error } = useQuery(
    ['mostPopular', companyId],
    () => getPopularDataById(companyId),
  );
  if (isLoading) return <p>Loading...</p>;

  if (isError) return <p>Error: {error.message}</p>;
  return (
    <div className="mt-20 text-black">
      <h1>Dashboard test</h1>
      <ChartView />
    </div>
  );
}
  );
}

[TkDodo]

The typescript docs have been updated for v4:
https://tanstack.com/query/v4/docs/typescript#typing-the-error-field

also, see: https://tkdodo.eu/blog/react-query-and-type-script