与 React Native 集成

您可以使用Apollo 客户端与 React Native 的方式安装它与 React.js。安装方式如下：npm：

1
npm install @apollo/client graphql

然后在 ApolloProvider 组件中包装您的应用程序，如下所示：

1
import React from 'react';
2
import { AppRegistry } from 'react-native';
3
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
4

5
// Initialize Apollo Client
6
const client = new ApolloClient({
7
  uri: 'https://127.0.0.1:4000/graphql',
8
  cache: new InMemoryCache()
9
});
10

11
const App = () => (
12
  <ApolloProvider client={client}>
13
    <MyRootComponent />
14
  </ApolloProvider>
15
);
16

17
AppRegistry.registerComponent('MyApplication', () => App);

关于 setup Apollo Client 的更多信息，请参阅入门。

示例应用程序

此示例应用程序由GraphQL指南维护，使用 React Native 和 Apollo Client。

Apollo 客户端开发者工具

1. 使用React Native Debugger

React Native Debugger 支持Apollo 客户端开发者工具：

1. 安装 React Native Debugger 并打开它。
2. 在您的应用程序中启用“远程调试 JS”。
3. 如果您看不到开发者工具面板或 Apollo 标签缺失，请右键单击任何位置并选择切换开发者工具。

2. 使用Flipper

名为React Native Apollo devtools的社区插件在 Flipper 中可用，支持查看缓存数据。

1. 安装 Flipper 并打开它。

2. 前往添加插件并搜索react-native-apollo-devtools并安装

3. 将react-native-flipper和react-native-apollo-devtools-client添加为react native应用的开发依赖。

4. 在客户端使用flipper初始化插件

   TypeScript

   1
   import { apolloDevToolsInit } from 'react-native-apollo-devtools-client';
   2
   
   3
     const client = new ApolloClient({
   4
       // ...
   5
     });
   6
   
   7
     if (__DEV__) {
   8
       apolloDevToolsInit(client);
   9
     }

   复制

通过文本流处理多部分HTTP

默认情况下，React Native自带基于XHR构建的fetch实现，不支持文本流。

因此，如果您正在使用以下中的任意一项：@defer或通过多部分HTTP的订阅——这些功能使用文本流来读取多部分HTTP响应——您需要采取额外的步骤来实现这一功能。

1. 安装react-native-fetch-api和react-native-polyfill-globals并将他们都作为依赖保存。
2. 在您应用的主入口处（例如index.js, App.js或类似文件），导入以下三个polyfill并在任何应用代码之前调用每个polyfill*函数：

1
import { polyfill as polyfillEncoding } from "react-native-polyfill-globals/src/encoding";
2
import { polyfill as polyfillReadableStream } from "react-native-polyfill-globals/src/readable-stream";
3
import { polyfill as polyfillFetch } from "react-native-polyfill-globals/src/fetch";
4

5
polyfillReadableStream();
6
polyfillEncoding();
7
polyfillFetch();

3. 最后，我们需要传递给我们的polyfill'd的fetch一个特殊选项。创建一个HttpLink以便我们可以在我们默认的fetchOptions中设置以下内容：

1
const link = new HttpLink({
2
  uri: "https://127.0.0.1:4000/graphql",
3
  fetchOptions: {
4
    reactNative: { textStreaming: true },
5
  },
6
});

现在您已准备好在React Native应用中使用@defer和/或多部分订阅在HTTP中！

故障排除

• 未捕获错误：无法读取'prototype'的属性或从@apollo/client导入时出现的类似Metro构建错误

这是由于 Metro 打包器支持 .cjs 和 .mjs 文件的方式，它需要额外的配置来隐式解析这些扩展名的文件: 需要额外的配置才能隐式解析这些扩展名的文件，因此隐式解析具有这些扩展名的文件时，扩展名将导致错误。import { ApolloClient, InMemoryCache } from '@apollo/client'将引发错误。您可以修改导入语句，例如import { ApolloClient, InMemoryCache } from '@apollo/client/main.cjs'，或者您可以安装@expo/metro-config并在项目根目录的metro.config.js中进行配置：

1
const { getDefaultConfig } = require('@expo/metro-config');
2

3
const config = getDefaultConfig(__dirname);
4

5
config.resolver.sourceExts.push(
6
  'cjs'
7
);
8

9
module.exports = config;