admin管理员组文章数量:1325538
Summarize Problem:
I'm trying to invalidate my GET
query for making a request to fetch a single user. Since there are many users, I have to 2 query keys on my GET
request, fetch-user
and id
:
useQuery<User, AxiosError>(['fetch-user', id], () => fetchUser(id));
Whenever I PATCH
the user I want to invalidate said request, otherwise the previous (cached) values are shown rather than the updated ones.
How do I invalidate a query with a specific key, in my case fetch-user
and an additional key of the id
?
Show some code:
Hook for GET
user with specific id:
const fetchUser = (id: number): Promise<User> => {
return axios.get(`/users/${id}`).then((resp) => resp.data);
};
export const useUserData = (id: number) => {
return useQuery<User, AxiosError>(['fetch-user', id], () => fetchUser(id));
};
Hook for PATCH
user with specific id:
const patchUser = (id: number, body: PatchUser): Promise<User> => {
return axios
.patch(`/users/${id}`, body, { headers: { 'Content-Type': 'application/merge-patch+json' } })
.then((resp) => resp.data);
};
export const useUpdateUserData = (id: number, onSuccess: (body: User) => void) => {
return useMutation<User, AxiosError, PatchUser>((variables) => patchUser(id, variables), {
onSuccess
});
};
Using react-query in my page:
const queryClient = useQueryClient();
const {
data: user,
isLoading: isUserGetLoading,
isSuccess: isUserGetSuccessful
} = useUserData(Number(id));
const OnSuccess = (body: User) => {
queryClient.invalidateQueries(['fetch-user', 'fetch-all-users']);
};
const {
mutate: updateUser,
isLoading: isUserPatchLoading,
isError: isUserPatchError,
error: userPatchError
} = useUpdateUserData(Number(id), OnSuccess);
What I've tried:
1. Passing an empty invalidateQueries
queryClient.invalidateQueries();
It works! But all queries are invalidated rather than the specific one I want to invalidate. So this is not an option.
2. Passing the id as a parameter
queryClient.invalidateQueries(['fetch-user', id, 'fetch-all-users']);
Doesn't invalidate the query.
3. Passing the id as a parameter and grouping it to fetch-user
queryClient.invalidateQueries([['fetch-user', id], 'fetch-all-users']);
Doesn't invalidate the query.
Workarounds:
I can change the key of the GET
query to contain the id, such as:
export const useUserData = (id: number) => {
return useQuery<User, AxiosError>([`fetch-user-${id}`], () => fetchUser(id));
};
And then I can invalidate it as:
const OnSuccess = (body: User) => {
queryClient.invalidateQueries([`fetch-user-${id}`, 'fetch-all-users']);
};
However, I'd like to avoid this.
Summarize Problem:
I'm trying to invalidate my GET
query for making a request to fetch a single user. Since there are many users, I have to 2 query keys on my GET
request, fetch-user
and id
:
useQuery<User, AxiosError>(['fetch-user', id], () => fetchUser(id));
Whenever I PATCH
the user I want to invalidate said request, otherwise the previous (cached) values are shown rather than the updated ones.
How do I invalidate a query with a specific key, in my case fetch-user
and an additional key of the id
?
Show some code:
Hook for GET
user with specific id:
const fetchUser = (id: number): Promise<User> => {
return axios.get(`/users/${id}`).then((resp) => resp.data);
};
export const useUserData = (id: number) => {
return useQuery<User, AxiosError>(['fetch-user', id], () => fetchUser(id));
};
Hook for PATCH
user with specific id:
const patchUser = (id: number, body: PatchUser): Promise<User> => {
return axios
.patch(`/users/${id}`, body, { headers: { 'Content-Type': 'application/merge-patch+json' } })
.then((resp) => resp.data);
};
export const useUpdateUserData = (id: number, onSuccess: (body: User) => void) => {
return useMutation<User, AxiosError, PatchUser>((variables) => patchUser(id, variables), {
onSuccess
});
};
Using react-query in my page:
const queryClient = useQueryClient();
const {
data: user,
isLoading: isUserGetLoading,
isSuccess: isUserGetSuccessful
} = useUserData(Number(id));
const OnSuccess = (body: User) => {
queryClient.invalidateQueries(['fetch-user', 'fetch-all-users']);
};
const {
mutate: updateUser,
isLoading: isUserPatchLoading,
isError: isUserPatchError,
error: userPatchError
} = useUpdateUserData(Number(id), OnSuccess);
What I've tried:
1. Passing an empty invalidateQueries
queryClient.invalidateQueries();
It works! But all queries are invalidated rather than the specific one I want to invalidate. So this is not an option.
2. Passing the id as a parameter
queryClient.invalidateQueries(['fetch-user', id, 'fetch-all-users']);
Doesn't invalidate the query.
3. Passing the id as a parameter and grouping it to fetch-user
queryClient.invalidateQueries([['fetch-user', id], 'fetch-all-users']);
Doesn't invalidate the query.
Workarounds:
I can change the key of the GET
query to contain the id, such as:
export const useUserData = (id: number) => {
return useQuery<User, AxiosError>([`fetch-user-${id}`], () => fetchUser(id));
};
And then I can invalidate it as:
const OnSuccess = (body: User) => {
queryClient.invalidateQueries([`fetch-user-${id}`, 'fetch-all-users']);
};
However, I'd like to avoid this.
Share Improve this question asked Aug 21, 2022 at 11:35 Wizard-of-KozWizard-of-Koz 1,7872 gold badges13 silver badges13 bronze badges1 Answer
Reset to default 5Call invalidateQueries
for each query you'd like to invalidate.
const OnSuccess = (body: User) => {
queryClient.invalidateQueries(['fetch-user']);
queryClient.invalidateQueries(['fetch-all-users']);
};
本文标签: javascriptReactQuery Invalidate query for specific idStack Overflow
版权声明:本文标题:javascript - React-Query: Invalidate query for specific id - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742194030a2430742.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论