Setup Apollo Client para requisições graphQL em React

admin数码26/11/2024 08:16:4300

Setup Apollo Client para requisições graphQL em React-第1张图片-海印网

介绍

本文将展示如何为 graphql 请求配置 react 应用程序，为此将使用 apollclient 库。这个想法是展示如何配置应用程序以及如何发出请求的示例。

库

@apollo/client：允许您管理状态并使用 graphql 发出请求的库
graphql：允许解析 graphql 查询的库

将库添加到项目中：

yarn add @apollo/client graphql --dev

设置

接下来我将展示如何配置 apolloclient 以启用 graphql 请求。
首先，将创建一个 apolloclient 上下文，以便其子级包含的所有内容都可以发出 graphql 请求：

import {
  apolloclient,
  apolloprovider,
  httplink,
  inmemorycache
} from '@apollo/client'

function exampleapolloprovider({ children, token, uri }) {
  const httplink = new httplink({
    uri: uri,
    headers: {
      authorization: `bearer ${token}`,
    },
  })

  const client = new apolloclient({
    cache: new inmemorycache(),
    link: httplink,
  })

  return <apolloprovider client={client}>{children}</apolloprovider>
}

export { exampleapolloprovider as apolloprovider }

登录后复制

在 const 客户端中，apolloclient 被初始化，传递有关它将从定义的链接命中的位置的信息，以及来自 inmemorycache 实例的缓存，apolloclient 使用该实例来缓存查询结果。
在 httplink 中，传递 graphql api 的 uri，并定义请求所需的标头，在本例中以使用 bearer 令牌为例。
最后，定义返回和导出以允许在应用程序内使用。

考虑到这是一个登录后将令牌保存在 localstorage 中的应用程序，并且您通常希望允许整个应用程序的 graphql 请求，因此使用上面文件中定义的 apolloprovider：

import { apolloprovider } from './contexts/apollocontext'
import appcontent from './components/appcontent'

const token = localstorage.getitem('@tokenid')
// endpoint da sua api graphql
const graphqluri = 'https://www.example.com'

const app = () => {
  return (
    <apolloprovider token={token} uri={graphqluri}>
      <appcontent />
    </apolloprovider>
  )
}

登录后复制

在本例中，令牌是从 localstorage 中获取的（在本例中，就好像它是使用 @tokenid 键保存的），并且 uri 在文件本身中定义，并传递给 apolloprovider。 appcontent 作为 apolloprovider 的子级传递，因此其中包含的所有内容（即整个应用程序）将能够发出 graphql 请求。
在实践中，具有不同的测试和生产环境，graphqluri 可以来自使用每个环境的 uri 定义的 env。

从 api 具有的名为 user 的查询开始，该查询返回用户的姓名和职业，将定义包含要调用的查询的文件：

import { gql } from '@apollo/client'

const get_user = gql`
  query getuser {
    user {
      name
      occupation
    }
  }
`

export default get_user

登录后复制

get_user 对应于 react 应用程序调用查询的方式，以及用户在 api 中搜索的查询的名称。

在定义appcontent的文件中，将调用get_user查询并使用其返回：

import { useQuery } from '@apollo/client';

import GET_USER from './query/UserQuery'

const AppContent = () => {
  const { loading, error, data } = useQuery(GET_USER)

  if (loading) return <p>Loading...</p>
  if (error) return <p>Falha na requisição</p>

  return (
    <>
      <h1>Welcome!</h1>
      <p>Name: {data.user.name}</p>
      <p>Occupation: {data.user.occupation}</p>
    </>
  )
}

登录后复制

usequery hook 将执行 get_user 中定义的查询，当请求未完成时返回 load true，如果请求失败则返回错误，当请求成功完成时返回数据。只要日期尚未返回，屏幕上就会出现“正在加载...”消息。如果请求以错误结束，则会显示消息“请求失败”。如果请求成功完成，用户的姓名和职业（姓名和职业）将会显示在屏幕上。
这样，apolloclient 就已针对 graphql 请求进行了配置并可供使用。