使用Apollo Client配置生产环境AWS AppSync遇启动页卡顿问题

开发环境下应用运行正常，但生产环境启动后卡在启动页，初始化阶段调用的API无法正常工作。以下是相关配置代码：

client.ts 文件 #

const link = ApolloLink.from([
  createAuthLink({
    url:'https://myapi.appsync-api.ap-northeast-1.amazonaws.com/graphql',
  region:'ap-northeast-1',
  auth:{
    type:'API_KEY',
    apiKey:'keyyyyy'
  }
  }),
  createHttpLink({ uri: `https://myapi.appsync-api.ap-northeast-1.amazonaws.com/graphql` }),
]);

export const client = new ApolloClient({
  link,
  cache,
});

app.tsx 文件 #

import React from 'react';
import { Platform } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { ApolloProvider } from '@apollo/client';
import { client } from './graphql/client';
import { StorageProvider } from './helpers';
import AppNavigator from './navigation/AppNavigator';
import { AppearanceProvider, ThemeProvider } from './theme';
import { ModalProvider, PostProvider, UserEventProvider } from './utils';

if (Platform.OS === 'android') {
  require('intl');
  require('intl/locale-data/jsonp/en-US');
}

export default function App() {
  return (
    <ApolloProvider client={client}>
      <StorageProvider>
        <SafeAreaProvider>
          <AppearanceProvider>
            <ThemeProvider>
              <PostProvider>
                <ModalProvider>
                  <UserEventProvider>
                    <AppNavigator />
                  </UserEventProvider>
                </ModalProvider>
              </PostProvider>
            </ThemeProvider>
          </AppearanceProvider>
        </SafeAreaProvider>
      </StorageProvider>
    </ApolloProvider>
  );
}

1. API Key 环境匹配问题 #

硬编码的keyyyyy大概率是开发环境密钥，生产环境需要使用AWS AppSync控制台生成的生产专属API Key。开发密钥在生产环境可能被禁用或权限受限，直接导致API请求被拒绝，阻塞启动流程。

解决：

• 用环境变量管理密钥，比如借助react-native-dotenv区分开发/生产配置：

  // client.ts
  import { API_KEY, API_URL, REGION } from '@env';
  
  const link = ApolloLink.from([
    createAuthLink({
      url: API_URL,
      region: REGION,
      auth: {
        type: 'API_KEY',
        apiKey: API_KEY
      }
    }),
  ]);
  

• 登录AWS控制台确认生产API Key处于启用状态，且访问策略配置正确。

2. Apollo 链路冗余冲突 #

createAuthLink本身已经包含HTTP请求的签名与转发逻辑，重复添加createHttpLink会导致请求链路冲突，生产环境下这种冲突会引发请求失败。

解决：

• 移除单独的createHttpLink，直接使用createAuthLink作为client的链路：

  // client.ts
  const link = createAuthLink({
    url:'https://myapi.appsync-api.ap-northeast-1.amazonaws.com/graphql',
    region:'ap-northeast-1',
    auth:{
      type:'API_KEY',
      apiKey:'生产环境API Key'
    }
  });
  
  export const client = new ApolloClient({
    link,
    cache,
  });
  

3. 生产环境网络权限配置 #

React Native生产环境下，平台网络权限配置缺失会导致无法访问API：

• Android：检查AndroidManifest.xml是否添加<uses-permission android:name="android.permission.INTERNET" />，打包时不要遗漏权限。
• iOS：检查Info.plist的ATS配置，确保允许访问目标域名，临时排查可添加：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

4. 缓存初始化问题 #

代码中cache变量未展示初始化逻辑，若生产环境缓存初始化失败（如序列化错误），会导致Apollo Client卡住，阻塞应用启动。

解决：

• 确保cache正确初始化，比如使用InMemoryCache：

  // client.ts
  import { InMemoryCache } from '@apollo/client';
  
  const cache = new InMemoryCache();
  
  // 后续client配置不变
  

5. 启动阶段错误未捕获 #

启动页API调用若未处理错误，生产环境会静默卡住（开发环境有错误提示）。

解决：

• 添加错误捕获链路，收集生产环境错误日志：

  // client.ts
  import { onError } from '@apollo/client/link/error';
  
  const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      graphQLErrors.forEach(({ message }) => console.log(`GraphQL错误: ${message}`));
    }
    if (networkError) console.log(`网络错误: ${networkError}`);
  });
  
  const link = ApolloLink.from([
    errorLink,
    createAuthLink({ /* 配置 */ }),
  ]);
  

• 接入生产环境日志收集工具，方便定位具体错误。

内容的提问来源于stack exchange，提问作者Dreamer