仅当 queryKeys 更改时，如何在单击按钮时使用反应查询来获取数据？

Question

我有一个带有 3 个输入和一个按钮的表单：

• 滑块1
• 滑块2
• 选择
• 播放按钮

我需要在第一次单击按钮时发送获取请求（以获取初始数据），然后仅当任何输入中的值发生更改时才需要获取数据。如果值相同，则不应提出请求。我怎样才能做到这一点？

我尝试了

refetch

，但每次我单击“播放”按钮时它都会触发。仅当用户单击按钮时才应发送请求。

export const useFetchVoiceSample = ({ id, language, accent, expressiveness }: GetVoiceSamplePayload) => {
  return useQuery({
    queryKey: ['voiceSample', id, language, accent, expressiveness],
    enabled: false,
    queryFn: async () => {
      return getVoiceSample({ id, language, accent, expressiveness });
    },
  });
};

Answer 1

React Query 是响应式的。它对查询键的更改做出反应。您可以通过更改查询键轻松地重新获取它，并通过不更改键（传递相同的键）使其返回现有数据。

function Component() {
  const [buttonClicked, setButtonClicked] = useState(false)

  useQuery({
    queryKey: [some, variables, buttonClicked]
  })

  return <button onClick={() => setButtonClicked(true)}>Click</button>
}

现在您的组件对按钮单击做出反应，它会改变状态。状态值用于查询键，因此如果单击一次，它会重新获取，因为

buttonClicked

发生了变化。但如果再次单击，则不再有任何变化。您可以对任何输入值使用相同的原理。