Question

试图了解useQuery如何在后台执行。首先呈现Booklist组件时，将调用booklist函数，并调用usequery钩子，它将加载设置返回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提供的自定义钩子，它在内部使用react钩子。

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

现在，只要组件呈现在将来，就不会使用挂钩中的参数，而是会返回缓存中的值。使用setter方法对值进行的任何更新都将应用于内存结果中

现在useQuery仍以相同的原理工作，传递给它的查询仅使用一次，以后在渲染时将返回缓存中的值

您可以签入有关lazy initial state的react文档

React Apollo useQuery-工作原理

1 个答案: