标签: react-query

回答这个问题后： React Query - 查询不使用缓存？

我还有另一个问题 - 如果我想重新获取窗口焦点上的数据，而不是其他情况怎么办？

如果我将 更改为上面问题中建议的那样，React Query 将永远不会重新获取窗口焦点staleTime。Infinity

除非有窗口焦点，否则是否有可能永远不会重新获取？

每篇文档都显示了与react-query一起使用的异步调用，但我有点困惑为什么这些是必要的，因为以下代码可以使用或不使用async/await：

export const apiCall = (method, path, data) => {
    return axios({method, url: API_PREFIX + path, data})
        .then(resp => resp.data)
        .catch(error => {

        });
};

export const useData = () => {
    const {data, isLoading, error, refetch} = useQuery(
        'users',
        async () => await apiCall(dispatch, 'get', '/some-endpoint'),
    );

    return {
        userList: data,
        refetch,
        isLoading
    }
}

我需要在我的组件中过滤电影。初始查询必须是所有电影。在我单击按钮（按钮名称例如history/\xd1\x81omedy）后，我在反应组件中渲染的数据必须更改为仅包含历史记录或\xd1\x81omedian 电影的此类查询的数据。我怎样才能在react-query中实现这一点？

我有一个自定义的 React 钩子，它本身使用了react-query useQuery()：

const useFetchSomething = () => {
  const { data, isLoading } = useQuery('key', ....);
  return .......
}

我必须创建一个自定义挂钩，然后使用useQuery()其中的挂钩，因为它有一些功能并从反应查询获取数据！

我尝试用以下方法测试这个钩子react-hooks-testing-library：

const { result } = renderHook(() => useFetchSomething());

但我收到此错误：

Error: Uncaught [Error: No QueryClient set, use QueryClientProvider to set one]

为此，我该如何包装这部分：renderHook(() => useFetchSomething())与提供者？

我正在使用 tRPC 将数据获取到客户端。tRPC 使用 React Query 作为开发依赖项，所以我也安装了它。由于我的应用程序相当小，因此我选择不使用 Redux。我读到 React Query 可以使用其 QueryClient API 缓存数据。这意味着我必须在每次获取/突变后手动设置和获取数据。同时，当从缓存获取数据时，我还必须为数据创建额外的类型，这违背了使用 tRPC 的目的，因为所有类型都存在于此。使用 tRPC 时我是否遗漏了有关缓存的任何内容？

Using fetch I can create a download link by doing the following code

const result = await fetch(authLinkProps.url, {
      headers: {
        Authorization: getUserToken(),
      },
    });

    const blob = await result.blob();
    const href = window.URL.createObjectURL(blob);

All works fine but I'm using React Query for my project so I want to be consistent and use this to do the same thing.

If I do the following

const { data, error } = useDocuments(authLinkProps.url);
let href: string = '';
console.log(data);
if (data !== …

我正在使用 React Query 根据用户的活动组织获取数据。用户能够切换他们正在查看其数据的组织，因此当值发生user.activeOrg变化时，我希望查询客户端使用新组织作为要从中获取的值来重新获取其查询。但是，由于该函数是以用户的默认组织作为初始值进行初始化的，因此当触发时，useEffect它仍然会从原始组织中获取数据。

有没有办法可以声明钩子的依赖关系，useQuery以便它可以根据user.activeOrg值更改刷新其查询？我知道您可以使用该enabled选项强制挂钩等到某个值存在后再激活（见useQuery下面的调用），但我找不到一种方法来为挂钩提供依赖的其他变量。任何帮助表示赞赏。谢谢。

const { user } = useActiveUser();
const queryClient = useQueryClient();

const getData = async () => {
  const data = await OrgService.getOrgData(user.activeOrg);
  return data;
};

const { data } = useQuery('orgData', getData, { enabled: !!user });

useEffect(() => {
  if (!user) return;
  queryClient.refetchQueries();
}, [user?.activeOrg]);

我试图在表单提交上调用一个突变，用于登录用户，我试图调用的函数是这样的：

export const login = async (email : string , password : string) => {
  
  const response = await  axios.post(`${BASE_URL}/users/login` , {"user":{email:email, password:password}});

  return response.data;

}

我正在尝试使用以下代码调用它：

  const { mutate, isLoading , error} = useMutation(variables => login(variables.email , variables.password))

我提交的表单如下所示：

  onSubmit={(values) => {
    console.log(values);
    mutate({email : values.email , password:values.password});
  }} 

但我这样做时遇到多个错误，正确的方法是什么？

错误是：类型“void”上不存在属性“email”。

类型“void”上不存在属性“password”。

类型为 '{ email: string; 的参数 密码：字符串；}' 不可分配给“void”类型的参数。

我定义为any 的类型是什么？我已经按照 RQ 文档尝试了 TQueryFnData。但得到Cannot find name 'TQueryFnData'

export const useFetchUser = (userID: string | undefined) => {
    return useQuery<any, Error>([users.fetchUser, userID],
        () => axios.get(`https://jsonplaceholder.typicode.com/users/${userID}`)
            .then(response => response.data))
}

返回数据的一个例子是：https://jsonplaceholder.typicode.com/users/1

export interface Users {
    id: number,
    name: string,
    username: string,
    email: string,
    address: Address,
    phone: string,
    website: string,
    company: Company
}

export interface Address {
  ...
}

export interface Geo {
  ...
}

export interface Company {
  ...
}

queryClient.refetchQueries()对比有什么不同const {refetch} = useQuery()

我不去想这有什么不同；

当我使用时queryClient.refetchQueries()，它可以工作一次，但我使用时const {refetch} = useQuery()，它可以工作两次

我做错了什么？

我想用const {refetch} = useQuery()