Data from useQuery has wrong type but returns correct values

[mateuscqueiros]

I have the following function that fetches data:

function fetchProjects(
  resourceId: number,
  { currentPage, pageSize, search }: fetchProjectsParams
) {
  return axios.get(
    `/api/resources/${resourceId}/projects`,
    {
      params: {
        page: currentPage - 1,
        pageSize,
        search,
      },
    }
  );
}

And the following implementation of useQuery:

export const useProjects = (
  { currentPage, pageSize, search }: fetchProjectsParams
) => {
  const { resource } = useResource();
  return useQuery({
    queryKey: ["projects", currentPage, pageSize, search],
    queryFn: async () =>
      fetchProjects(resource.id, { currentPage, pageSize, search }),
    enabled: Boolean(resource.id),
  });
};

Then I use the query like this:

const { isPending, isFetching, isError, data } = useProjects({
    currentPage,
    pageSize,
    search,
  });

  const projects = data?.projects.data; // <=== ERROR: Property 'projects' does not exist on type 'AxiosResponse<any, any>'.
  const total = data?.projects.total;      // <=== ERROR: Property 'projects' does not exist on type 'AxiosResponse<any, any>'.

When ignoring the errors and running the code, the data is fetched and displayed correctly on screen.

To solve the errors on VS Code I modified fetchProjects to the following:

async function fetchProjects(
  resourceId: number,
  { currentPage, pageSize, search }: fetchProjectsParams
) {
  const { data } = await axios.get(
    `/api/resources/${resourceId}/projects`,
    {
      params: {
        page: currentPage - 1,
        pageSize,
        search,
      },
    }
  );

  return data
}

With this, the errors disappear, but the data is not being displayed anymore and a new error appears on the console:

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["projects",1,10,""]

I know the data is being fetched by Axios because it's appearing on the Network Tab.

I also tried modifying fetchProjects to:

function fetchProjects(
  resourceId: number | undefined,
  { currentPage, pageSize, search }: fetchProjectsParams
) {
  return axios.get(
    `/api/resources/${resourceId}/projects`,
    {
      params: {
        page: currentPage - 1,
        pageSize,
        search,
      },
    }
  )
  .then(({ data }) => {
    return data;
  });;
}

But the results are the same: no errors on VS Code, data is fetched but react-query is not displaying it.
Apparently I'm not returning anything to queryFn. Trying to return some mockData directly to queryFn solves both problems, but not with Axios Requests.

What can I do?

[ddddami]

Hii, from Bard AI

The issue lies in the way you're handling the Axios response in the fetchProjects function. When you return the entire Axios response object, it's not providing the expected data structure that React Query expects. To fix this, you need to explicitly extract the data from the Axios response and return it.

Here's the modified fetchProjects function that correctly returns the data:

async function fetchProjects(
  resourceId: number,
  { currentPage, pageSize, search }: fetchProjectsParams
) {
  const response = await axios.get(
    `/api/resources/${resourceId}/projects`,
    {
      params: {
        page: currentPage - 1,
        pageSize,
        search,
      },
    }
  );

  // Extract data from the Axios response
  const { data } = response;

  // Return only the data
  return data;
}

With this modification, the fetchProjects function will return the expected data structure, and React Query will be able to correctly handle the response and provide the data to your component.

[mateuscqueiros]

Hello! Thank you for your reply. Unfortunately that didn't solve my problem. The type errors in VS Code are still happening and now the console errors that I mentioned (Query function must return a value) happens as well. I should also mention that I'm using Next.js.