React Static 项目中集成 Apollo GraphQL 的完整指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00974/article/details/148415802

React Static 项目中集成 Apollo GraphQL 的完整指南

react-static ⚛️ 🚀 A progressive static site generator for React. 项目地址: https://gitcode.com/gh_mirrors/re/react-static

前言

在现代前端开发中，GraphQL 已经成为数据获取的重要方式之一。本文将详细介绍如何在 React Static 项目中集成 Apollo GraphQL 客户端，实现静态生成与动态数据获取的完美结合。

为什么选择 Apollo 与 React Static 结合

React Static 是一个强大的静态网站生成器，而 Apollo 是当前最流行的 GraphQL 客户端。它们的结合可以带来以下优势：

静态生成优化：在构建时预取数据生成静态页面，提升SEO和首屏性能
动态数据能力：在客户端实时获取最新数据，保持应用动态性
开发体验统一：使用相同的 GraphQL 查询语法处理静态和动态数据

基础配置

安装必要依赖

首先需要安装 Apollo 相关依赖包：

yarn add apollo-client apollo-cache-inmemory apollo-link-http react-apollo graphql-tag graphql node-fetch

创建 Apollo 客户端实例

在项目中创建 Apollo 客户端配置文件：

import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import fetch from 'node-fetch'

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://your-api-server/graphql',
    fetch,  // 关键点：使用node-fetch兼容服务端渲染
  }),
  cache: new InMemoryCache(),
})

export default client

应用层集成

在应用根组件中设置 Apollo Provider：

import React from 'react'
import { Root, Routes } from 'react-static'
import { ApolloProvider } from 'react-apollo'
import client from './apolloClient'

function App() {
  return (
    <ApolloProvider client={client}>
      <Root>
        {/* 应用布局和路由 */}
        <Routes />
      </Root>
    </ApolloProvider>
  )
}

export default App

构建时数据获取

React Static 的核心优势之一是在构建时预取数据生成静态页面。我们可以利用 Apollo 客户端在 static.config.js 中获取数据：

import client from './src/apolloClient'
import GET_PRODUCTS from './src/graphql/getProducts'

export default {
  getRoutes: async () => {
    const { data: { allProducts: products } } = await client.query({
      query: GET_PRODUCTS,
    })

    return [
      {
        path: '/products',
        template: 'src/pages/Products',
        getData: () => ({ products }),
        children: products.map(product => ({
          path: `/${product.seoName}`,
          template: 'src/pages/Product',
          getData: () => ({ product }),
        })),
      },
    ]
  },
}

客户端动态数据获取

对于需要实时更新的数据，可以在组件中使用 Apollo 的 Query 组件：

import React from 'react'
import { Query } from 'react-apollo'
import GET_PRODUCT from '../graphql/getProduct'

function ProductDetail({ productId }) {
  return (
    <Query query={GET_PRODUCT} variables={{ id: productId }}>
      {({ loading, error, data }) => {
        if (loading) return <div>加载中...</div>
        if (error) return <div>加载错误</div>
        
        return (
          <div>
            <h2>{data.product.name}</h2>
            <p>库存: {data.product.stock}</p>
          </div>
        )
      }}
    </Query>
  )
}

混合模式：静态+动态数据

结合静态生成和动态获取的优势，可以创建高性能的页面：

import React from 'react'
import { withRouteData } from 'react-static'
import { Query } from 'react-apollo'
import GET_PRODUCT from '../graphql/getProduct'

function ProductPage() {
  // 静态数据来自构建时
  const { product } = useRouteData()

  return (
    <div>
      {/* 静态内容 */}
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      
      {/* 动态内容 */}
      <Query query={GET_PRODUCT} variables={{ id: product.id }}>
        {({ data }) => (
          <div>
            <p>实时价格: {data.product.price}</p>
            <p>库存状态: {data.product.stockStatus}</p>
          </div>
        )}
      </Query>
    </div>
  )
}