多次使用 useQuery 返回相同的数据

huangapple go评论66阅读模式
英文:

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 = () =&gt; {
    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 = [&quot;student&quot;];
  const { token, updateToken } = useStoreToken();

  const getStudent = async () =&gt; {
    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: &quot;Oh no!&quot;,
        message: getMessage(err),
        color: &quot;red&quot;,
        icon: &lt;TbX /&gt;,
      });
      throw err;
    }
  };

  return {
    ...useQuery(queryKey, getStudent, {
      fetchPolicy: &quot;no-cache&quot;,
    }),
  };
}

     useEffect(() =&gt; {
    if (data1) {
      setStudentAData(data1);
    }
    }, [data1]);
 
    useEffect(() =&gt; {
        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: [&#39;student&#39;, id_x], // Provide a unique key for this query
});
const { isLoading: isLoading2, error: error2, data: data2 } = useQueryStudent(id_y, {
  queryKey: [&#39;student&#39;, id_y], // Provide a unique key for this query
});

huangapple
  • 本文由 发表于 2023年7月28日 04:32:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/76783227.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定