reactjs - React Apollo useQuery - 它是如何工作的

Question

试图了解 useQuery 如何在后台执行。当首先呈现 Booklist 组件时，调用 booklist 函数并调用 usequery Hook ，它返回加载设置为 true 并开始在后台执行 graphql 请求。当它从服务器检索响应时，它会更新属性并再次重新呈现组件，从头开始再次调用 BookList 函数。当再次调用 useQuery 时会发生什么情况，它会发出另一个请求还是从缓存中获取数据？它是如何工作的。

粘贴下面的代码

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import {  useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";



function BookList() {
    console.log('Inside booklist')
    const { loading, error, data } = useQuery(gql`
      {
        countries {
            full_name_english
            full_name_locale
          }
      }
    `);
    console.log('Inside booklist1')
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;

        console.log('iam here22');
        console.log(data);
        // return (<div>completed</div>);
        return data.countries.map(({ full_name_english, full_name_locale },index) => (
            <div key={index}>
              <p>
                { full_name_english}: {full_name_locale}
              </p>
            </div>
          ));
  }
export default BookList;


App.js
function App() {
  return (
    <ApolloProvider client={client}>
      <div id="main">
            <h3> TEST APP</h3>
            <MyTest />

            <BookList/>

      </div>
    </ApolloProvider>

  );
}
export default App;

Answer 1

useQuery 是 apollo 提供的自定义 hook，它内部使用了 react hook。

现在 react 钩子(Hook)的工作方式是，当它们第一次被渲染时，它们使用作为参数传递给它们的值并将结果存储在内存中

现在，只要组件渲染是 future 的， Hook 中的参数就不会被使用，但缓存中的值会被返回。使用 setter 方法对值的任何更新都将应用于内存中的结果

现在 useQuery 也按照相同的原则工作，传递给它的查询只使用一次，在以后的渲染中返回缓存中的值

您可以查看有关 lazy initial state 的 React 文档