javascript - react 查询获取旧数据

Question

我有一个作为项目列表的母版页，以及一个我获取并可以更新项目的详细信息页面。我有以下基于 react-query 库的钩子(Hook):

const useItems = (options) => useQuery(["item"], api.fetchItems(options)); // used by master page
const useItem = id => useQuery(["item", id], () => api.fetchItem(id)); // used by details page
const useUpdateItem = () => {
  const queryClient = useQueryClient();
  return useMutation(item => api.updateItem(item), {
    onSuccess: ({id}) => {
     queryClient.invalidateQueries(["item"]);
     queryClient.invalidateQueries(["item", id]);
   }
  });
};

UpdatePage 组件有一个表单组件，它接受一个 defaultValue 并将其加载到它的本地“草稿”状态中 - 所以在这方面它有点“不受控制”，我不提升草稿状态。

// UpdatePage

const query = useItem(id);
const mutation = useUpdateItem();

return (
  {query.isSuccess && 
   !query.isLoading && 
   <ItemForm defaultValue={query.data} onSubmit={mutation.mutate} />
  }
);

问题是我更新后，转到母版页面，然后返回详细信息页面，“defaultValue”在查询完成之前获取旧项目。我确实看到它击中了网络中的 API，并且新的值(value)又回来了，但为时已晚。重新查询数据后如何只显示ItemForm？还是有更好的模式？

Answer 1

我的 updateItem API 函数从服务器返回单个更新的项目。
我用了setQueryData解决这个问题。

const useUpdateItem = () => {
  const queryClient = useQueryClient();
  // Note - api.updateItem is return the single updated item from the server
  return useMutation(item => api.updateItem(item), {
    onSuccess: data => {
     const { id } = data;
     // set the single item query
     queryClient.setQueryData('item', id], data);
     // set the item, in the all items query
     queryClient.setQueryData(
          ['item'],
          // loop through old. if this item replace, otherwise, don't
          old => {
            return old && old.map(d => (d.id === id ? data : d));
          }
        );
   }
  });
};

我会说，react-query 对键很挑剔，即使它是模糊的。最初我的 id 来自 url 搜索参数和一个字符串，但是从 db 返回的项目是一个 int，所以它不匹配。所以有一点问题。
另外，当我回到主列表页面时，我看到项目发生了变化，这对来自 redux 的我来说有点奇怪。我会认为它在我触发同步 setQueryData 后立即更改。因为我使用的是 react-router，所以“页面”已完全重新安装，所以不确定为什么它会加载旧的查询数据然后更改它。