英文:
multiple useQuery giving the same data
问题
I have two useQuery hooks to get data:
const {isLoading, error, data} = useQueryStudent(id_x);
const {isLoading: isLoading2, error: error2, data: data2} = useQueryStudent(id_y)
but both data and data2 are giving me the same value for student(id_x), how do i get it so that data2 give me its intended value which is different from data?
I also tried this, but it doesn't also work:
const queryMultiple = () => {
const res1 = useQueryStudent(id_x)
const res2 = useQueryStudent(id_y)
return [res1, res2]
}
const [
{ isLoading: isLoading1,
error: error1,
data: data1, },
{ isLoading: isLoading2,
error: error2,
data: data2, }
] = queryMultiple()
this is my useQueryStudent:
function useQueryStudent(studentId) {
const queryKey = ["student"];
const { token, updateToken } = useStoreToken();
const getStudent = async () => {
try {
const headers = { Authorization: `Bearer ${token}` };
const endpoint = `${BASE_URL}/api/student/${studentId}`;
const res = await axios.get(endpoint, { headers });
const { message, data, token: newToken } = res.data;
debug({ message, data });
updateToken(newToken);
return data;
} catch (err) {
debug({ err });
showNotification({
title: "Oh no!",
message: getMessage(err),
color: "red",
icon: <TbX />,
});
throw err;
}
};
return {
...useQuery(queryKey, getStudent, {
fetchPolicy: "no-cache",
}),
};
}
useEffect(() => {
if (data1) {
setStudentAData(data1);
}
}, [data1]);
useEffect(() => {
if (data2) {
setPlayerBData(data2);
}
}, [data2]);
英文:
I have two useQuery hooks to get data:
const {isLoading, error, data} = useQueryStudent(id_x);
const {isLoading: isLoading2, error: error2, data: data2} = useQueryStudent(id_y)
but both data and data2 are giving me the same value for student(id_x), how do i get it so that data2 give me its intended value which is different from data?
I also tried this, but it doesn't also work
const queryMultiple = () => {
const res1 = useQueryStudent(id_x)
const res2 = useQueryStudent(id_y)
return [res1, res2]
}
const [
{ isLoading: isLoading1,
error: error1,
data: data1, },
{ isLoading: isLoading2,
error: error2,
data: data2, }
] = queryMultiple()
this is my useQueryStudent:
function useQueryStudent(studentId) {
const queryKey = ["student"];
const { token, updateToken } = useStoreToken();
const getStudent = async () => {
try {
const headers = { Authorization: `Bearer ${token}` };
const endpoint = `${BASE_URL}/api/student/${studentId}`;
const res = await axios.get(endpoint, { headers });
const { message, data, token: newToken } = res.data;
debug({ message, data });
updateToken(newToken);
return data;
} catch (err) {
debug({ err });
showNotification({
title: "Oh no!",
message: getMessage(err),
color: "red",
icon: <TbX />,
});
throw err;
}
};
return {
...useQuery(queryKey, getStudent, {
fetchPolicy: "no-cache",
}),
};
}
useEffect(() => {
if (data1) {
setStudentAData(data1);
}
}, [data1]);
useEffect(() => {
if (data2) {
setPlayerBData(data2);
}
}, [data2]);
</details>
# 答案1
**得分**: 0
我需要查看你是如何实现`useQueryStudent`的,但我认为问题在于这两个查询都共享相同的查询键,因此第二个查询会从缓存中返回第一个查询的数据。要解决这个问题,你需要为每个查询提供一个唯一的查询键:
```javascript
const { isLoading, error, data } = useQueryStudent(id_x, {
queryKey: ['student', id_x], // 为该查询提供一个唯一的键
});
const { isLoading: isLoading2, error: error2, data: data2 } = useQueryStudent(id_y, {
queryKey: ['student', id_y], // 为该查询提供一个唯一的键
});
英文:
I need to see how you implemented useQueryStudent
, but I think the issue here is that because both queries are sharing the same query key so the second query returns the data from the first query in the cache. To resolve this you need to provide each query with its unique query key:
const { isLoading, error, data } = useQueryStudent(id_x, {
queryKey: ['student', id_x], // Provide a unique key for this query
});
const { isLoading: isLoading2, error: error2, data: data2 } = useQueryStudent(id_y, {
queryKey: ['student', id_y], // Provide a unique key for this query
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论