如何在反应路由器中调用阿波罗客户端 useQuery？

Posted 2023-03-08

【中文标题】如何在反应路由器中调用阿波罗客户端 useQuery？

【英文标题】：How to call apollo client useQuery in react router?

【发布时间】：2021-06-28 03:56:02

【问题描述】：

我在使用 GraphQL 进行 React 路由时遇到了奇怪的情况。我在/users url 中有一个用户，当我第一次进入用户页面时，useQuery 正在工作，请求将发送到服务器并为我带来一些数据。然后，如果我转到另一个页面并返回用户页面，useQuery 不工作并且请求不会发送到服务器。 useQuery 正在工作，当我重新加载页面时请求将发送到服务器。这是我对用户组件的代码和查询：

Users.js

import React,  useState, useEffect  from "react";
import  useLazyQuery, useQuery  from '@apollo/client'
import  USERS from './queries'


const [usersList, setUsersList] = useState([])
const  loading, error, data  = useQuery(USERS);


const Users= () => 

  useEffect(() => 
    const result = data?.users?.payload.filter(item => item.status === "waiting" && !item.isDeleted)
    setUsersList(result)
  , [loading, data])

  return (
    <div>
      usersList?.map(user => (
        <div key=user.key>
          <h1>user.name</h1>
          <p>user.status</p>
        </div>
      ))
    </div>
)

queries.js

import  gql  from '@apollo/client';

export const USERS= gql`
query
  users(size: 50)
    payload
      key,
      isDeleted,
      status,
      name,
      ...
    
  
`

那么，最后一个问题，为什么 useQuery 在网站重新加载而不是重新渲染时只工作一次？

【参考方案1】：

这是设计使然 – 您的查询结果将在第一次触发查询时存储在 Apollo 客户端的缓存中。如果查询的变量没有改变，那么查询实际上不会再次通过网络，Apollo 客户端会将数据从其缓存中提取出来。

如果您希望每次运行挂钩时请求通过网络发送到您的服务器，您可以更改 useQuery 挂钩上的 fetchPolicy：https://www.apollographql.com/docs/react/data/queries/#supported-fetch-policies

【参考方案2】：

您可以为此使用 useLazyQuery 和 useEffect useLazyQuery

const [runQuery,  data, loading, called ] = useLazyQuery(yourQuery);

useEffect(() =>  runQuery(); , [location]);

我想你会明白的；）

编辑：您也可以将普通查询上的 FetchPolicy 更改为 network-only 查询（我认为这也应该有效）： params of useQuery

【讨论】：

感谢您关注我的问题。我知道useLazyQuery，但我想知道是否可以使用useQuery 调用该runQuery。我在 useQuery 中找到了refetch，它运行良好。所以，再谢谢你一次