Apollo 使用获取数据

使用Apollo 优势是什么：

1. 声明式数据获取：编写gql查询并接收数据，而无需手动跟踪加载状态
2. 出色的开发人员经验：享受TypeScript，Chrome DevTools和VS Code的有用工具
3. 专为现代React设计:充分利用最新的React功能，例如hooks
4. 可逐步采用：将 Apollo无缝插入任何JavaScript应用程序,可以直接嵌套到任何一个前端项目中

如何获取数据：

1. 可以在 create-react-app 中，引入 apollo-boost @apollo/react-hooks graphql-tag
2. 每次查询返回的正确结果都会保存在前端缓存中

import React from "react";
import { render } from "react-dom";

import ApolloClient from "apollo-boost";
import { ApolloProvider, useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";

// client 是指获取服务器的地址
const client = new ApolloClient({
  uri: "https://48p1r2roz4.sse.codesandbox.io"
});

function ExchangeRates() {
// useQuery 查询 里面接收第一个参数查询的语句条件，并且返回了三个参数
// loading :true  or false   true代表查询中 false 相反
// error ：查询中出现的错误
// data : 查询后从服务器返回的数据
  const { loading, error, data } = useQuery(gql`
    {
      rates(currency: "USD") {
        currency
        rate
      }
    }
  `);

  if (loading) return <p>加载中Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}
//  ApolloProvider 创建上下文连接，放在组件的最顶层（包括路由），类似 Context.Provider  可以从组件树中的任何位置访问它
const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>My first Apollo app </h2>
      <ExchangeRates />
    </div>
  </ApolloProvider>
);

render(<App />, document.getElementById("root"));

useQuery 的第二个参数对象，（重复定时请求数据） 参数接收：
1 variables 变量 2 pollInterval 定时重复请求数据

 const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
    dog(breed: $breed) {
      id
      displayImage
    }
  }
`;

function DogPhoto({ breed }) {
  const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
    variables: { breed },  // 
    pollInterval: 500,//每0.5秒自动执行一次请求
  });

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
    <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
  );
}

refetch 和pollInterval 相反，refetch 触发重复再执行一次这条请求，可接收变量，如果不传入，默认现有变量

 function DogPhoto({ breed }) {
 // 可以进行结构改变变量名称
  const { loading:dataLoading, error, data, refetch } = useQuery(GET_DOG_PHOTO, {
    variables: { breed },
    skip: !breed,
     notifyOnNetworkStatusChange: true //和 refetch 配套使用为true时显示加载中的状态false 则相反
  });
 if (networkStatus === 4) return 'Refetching!';  // 表示是否正在 refetch 重新请求中 networkStatus 1--8   4 代表请求中
  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
    <div>
      <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
      <button onClick={() => refetch()}>Refetch!</button>
    </div>
  );
}