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>
  );
}

你可能感兴趣的:(react,Apollo)