npm 包 taro-apollo 使用教程

简介

taro-apollo 是一款基于 React 框架 Taro 的插件，用于将 Apollo 数据层和 Taro 框架深度融合，方便前端开发人员使用 GraphQL 进行数据交互。

安装

使用 npm 安装 taro-apollo：

npm install taro-apollo --save

使用

在 Taro 项目的 app.js 中引入 taro-apollo：

import { ApolloProvider } from 'taro-apollo'

在 config/index.js 中进行 Apollo 配置：

apollo: {
  clientConfigs: {
    default: {
      httpLinkOptions: {
        uri: 'https://api.example.com/graphql'
      }
    }
  }
}

在页面组件中使用 ApolloProvider 包括需要渲染的组件：

const Index = () => {
  return (
    <ApolloProvider>
      <View>Hello World!</View>
    </ApolloProvider>
  )
}

之后便可以在该页面中正常使用 graphQL 请求数据：

import { graphql } from 'taro-apollo'

const query = graphql`
  query User {
    user {
      name
      age
    }
  }
`

const User = () => {
  const { data } = useQuery(query)

  return (
    <View>{data && data.user.name}</View>
  )
}

示例代码

以下代码将获取 Github 的用户列表：

import Taro, { useState } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import { graphql } from 'taro-apollo'
import { useQuery } from 'taro-apollo-hooks'

import { ApolloProvider } from 'taro-apollo'
import ApolloClient from 'apollo-boost'

import './index.scss'

const GITHUB_API_BASE = 'https://api.github.com/graphql'

const createUserCard = (user) => {
  const { login, name, avatarUrl } = user

  return (
    <View className='user-card' key={login}>
      <Image src={avatarUrl} className='user-card-avatar' />
      <View className='user-card-info'>
        <Text className='user-card-info-name'>{name}</Text>
        <Text className='user-card-info-login'>{login}</Text>
      </View>
    </View>
  )
}

const Users = () => {
  const [cursor, setCursor] = useState(null)

  const { data, error, loading, fetchMore } = useQuery(USERS_QUERY, {
    variables: { cursor },
    notifyOnNetworkStatusChange: true,
    fetchPolicy: 'no-cache'
  })

  const fetchMoreUsers = () => {
    if (loading) return
    const hasMore = data.viewer && data.viewer.repositories.pageInfo.hasNextPage

    if (hasMore) {
      const { endCursor } = data.viewer.repositories.pageInfo
      fetchMore({
        variables: { cursor: endCursor },
        updateQuery: (prevResult, { fetchMoreResult }) => {
          const newEdges = fetchMoreResult.viewer.repositories.edges
          const pageInfo = fetchMoreResult.viewer.repositories.pageInfo

          setCursor(pageInfo.endCursor)
          return {
            viewer: {
              ...prevResult.viewer,
              repositories: {
                ...prevResult.viewer.repositories,
                edges: [...prevResult.viewer.repositories.edges, ...newEdges],
                pageInfo
              }
            }
          }
        }
      })
    }
  }

  const users = (data && data.viewer && data.viewer.repositories) ? data.viewer.repositories.edges.map((item) => item.node.owner) : []

  return (
    <View className='users'>
      {error && <View className='error-message'>Error: {error.message}</View>}
      {users.map((user) => createUserCard(user))}
      <Button className='load-more-button' onClick={fetchMoreUsers} disabled={!data.viewer.repositories.pageInfo.hasNextPage}>{loading ? 'Loading...' : 'Load More'}</Button>
    </View>
  )
}

const App = () => {
  const client = new ApolloClient({
    uri: GITHUB_API_BASE,
    headers: {
      authorization: `Bearer ${process.env.GITHUB_TOKEN}`
    }
  })

  return (
    <ApolloProvider client={client}>
      <Users />
    </ApolloProvider>
  )
}

export default App

深度解析

• ApolloProvider：ApolloProvider 是 Taro 应用中使用 Apollo 状态管理器的根组件。由于 Apollo 使用了 GraphQL 查询语言，这些查询需要发送到 GraphQL 服务器执行，并将结果同时存储在 Apollo Client 中以供使用。

• graphql：graphql 是一个高阶组件，它负责将 GraphQL 查询字符串和变量注入到 React 组件中。

• useQuery：useQuery 是一个 React 钩子函数，它使用状态管理库 Apollo 提供的 query 功能，从 GraphQL API 获取数据。它的返回值包括 loading，error 和 client，以及由 Graphql 请求返回的实际 data。userQuery 接受一个 GraphQL 模板字符串作为参数，从中生成具有适当选项的 GraphQL 查询，并返回包含执行结果的Promise结构。

• ApolloClient：ApolloClient 是一个基于缓存的大规模数据管理框架，它可以有效地管理您应用程序的数据层。该框架提供了一组工具和实用程序，可大大简化与 GraphQL 后端的集成过程，并支持如防止超查询、缓存完整性、类型安全等高度自定义的数据管理需求。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/60067381890c4f727758427d