Same code not working with "useQuery" after updated from v1.5.7 to v3.5.11

[Xi-gofore]

My code used to work but now not working after updated from react-query v1.5.7 to v3.5.11.

The broken part is the way to pass function parameters.

e.g.

const fetchStudentDetail = async (_, id) => {
  const response = await httpClient.get(`/students/${id}/details`);
  return response.data;
};

I used to be able to do this to pass the id as parameter in useQuery hook:

const {status, data, error, isError, isLoading, isFetching} = useQuery(
    ['student-detail', studentId],
    fetchStudentDetail);

The studentId is passed into fetchStudentDetail function as the parameter of id.

But now, same code yields id with value undefined inside fetchStudentDetail function even though the useQuery code pass a valid studentId. Why it doesn't recognize the passed in parameter after updated to v3.5.11 ? How to fix it with react-query v3.5.11?

[TkDodo]

in v3, the query key is no longer spread into the queryFn. please see the upgrade guide: https://react-query.tanstack.com/guides/migrating-to-react-query-3

const fetchStudentDetail = async (id) => {
  const response = await httpClient.get(`/students/${id}/details`);
  return response.data;
};

const {status, data, error, isError, isLoading, isFetching} = useQuery(
    ['student-detail', studentId],
    () => fetchStudentDetail(studentId));

[Xi-gofore]

Thanks, seems you are right but your code still not working cause the passed in idis [object object], seems I have to do the following instead:

const fetchStudentDetail = async ({queryKey}) => {
  const id = queryKey[1];
  const response = await httpClient.get(`/students/${id}/details`);
  return response.data;
};

const {status, data, error, isError, isLoading, isFetching} = useQuery(
    ['student-detail', studentId],
    () => fetchStudentDetail(studentId));

Do you happen to know a prettier way than queryKey[1]? I feel the old version style is more readable in code than this one.

[TkDodo]

Thanks, seems you are right but your code still not working cause the passed in idis [object object],

I was just passing in studentId that you also added to the key 🤷

Do you happen to know a prettier way than queryKey[1]?

array destructuring:

const fetchStudentDetail = async ({queryKey: [, id]}) => {

[Xi-gofore]

You are right , my bad. Besides I passed both key and studentId in the function, also I forget to wrap the function call inside an arrow function, I mean I also missed replacing fetchStudentDetail(studentId) to ()=> fetchStudentDetail(studentId).

[Xi-gofore]

BTW, how about configuration options? I saw in the updated guide that the configuration is collapsed.

In old version I did:

const {status, data, error, isError, isLoading, isFetching} = useQuery(
    ['student-detail', studentId],
    fetchStudentDetail,
    {cacheTime: 5*1000});

Now in new version according to the guide I tried:

const {status, data, error, isError, isLoading, isFetching} = useQuery(
    ['student-detail', studentId],
    () => fetchStudentDetail(studentId)),
    cacheTime: 5*1000
);

But is syntacticly wrong.

[TkDodo]

only the object notation got collapsed. The version with multiple params stays the same.