Apollo 使用获取数据

最新推荐文章于 2024-07-04 00:33:44 发布

学海无涯，生有崖

最新推荐文章于 2024-07-04 00:33:44 发布

阅读量2.1k

点赞数

分类专栏： react Apollo

本文链接：https://blog.csdn.net/weixin_43550927/article/details/103938486

版权

Apollo框架提供声明式数据获取，优化开发体验，尤其适合React应用。它支持TypeScript、Chrome DevTools和VS Code工具，可以无缝融入任何JavaScript项目。在创建React应用时，通过引入apollo-boost、@apollo/react-hooks和graphql-tag库来获取数据。Apollo前端缓存能存储每次查询的结果，useQuery组件的pollInterval参数可实现定时重复请求，而refetch则用于触发一次性重新执行请求。

摘要由CSDN通过智能技术生成

使用Apollo 优势是什么：

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

如何获取数据：

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

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
      }