React Apollo useQuery - 它是如何工作的答案

【问题标题】：React Apollo useQuery - how it worksReact Apollo useQuery - 它是如何工作的
【发布时间】：2020-09-02 03:26:56
【问题描述】：

试图了解 useQuery 如何在后台执行。当 Booklist 组件首先渲染时，会调用 booklist 函数并调用 usequery 钩子，它会将 loading 设置为 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;

【问题讨论】：

不被要求，因为条件没有改变（变量 - 此处未使用）

标签： reactjs graphql

【解决方案1】：

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

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

现在，每当组件呈现未来时，不会使用挂钩中的参数，但会返回缓存中的值。使用 setter 方法对值的任何更新都将应用于内存结果

现在useQuery 也按照相同的原理工作，传递给它的查询只使用一次，并且在将来渲染时返回缓存中的值

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

【讨论】：

不错的答案 :) 向上