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

【问题标题】：How to call apollo client useQuery in react router?如何在反应路由器中调用阿波罗客户端 useQuery？
【发布时间】：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 在网站重新加载而不是重新渲染时只工作一次？

【问题讨论】：

标签： reactjs react-router graphql react-hooks apollo-client

【解决方案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，它运行良好。所以，再谢谢你一次