Question

我在使用 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 在站点重新加载时只工作一次，而不是重新渲染？

Answer 1

你可以使用 useLazyQuery 和 useEffect useLazyQuery

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

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

我想你会明白的;)

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

Answer 2

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

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

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

2 个答案: