React(Next.js)中如何将ApolloProvider嵌套在StatsigProvider内获取正确useGate值

你遇到的问题本质是Statsig的上下文生效时机和Apollo Client的初始化时机不匹配：

• useGate 是Statsig提供的React Hook，必须在 <StatsigProvider> 包裹的组件树内部调用才能拿到正确的开关值，否则会一直返回默认值false
• 你之前在App组件顶层先执行了useApollo(pageProps)初始化Apollo实例，此时<StatsigProvider>还未渲染，useApollo内部调用的useGate完全访问不到Statsig的上下文，自然拿不到正确的开关状态
• 你设置的waitForInitialization={true}只保证Provider内部的子组件渲染时Statsig已经初始化完成，对Provider外部的代码不生效

方案1：调整Provider嵌套顺序，延迟初始化Apollo Client #

这是最稳妥的方案，保证Apollo初始化时Statsig已经就绪：

1. 调整_app.js的Provider嵌套结构，把<ApolloProvider>移到<StatsigProvider>内部
2. 把Apollo Client的初始化逻辑也移到StatsigProvider内部执行，此时useGate可以拿到正确的开关值

修改后的_app.js代码示例：

const AddStatsigAndApollo = (pageProps) => {
  // 这里已经在StatsigProvider内部，useGate返回正确值
  const apollo = useApollo(pageProps)
  return (
    <ApolloProvider client={apollo}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

return (
  <StatsigProvider
    sdkKey={`${env.statsigKey}`}
    options={{ environment: { tier: env.environment } }}
    waitForInitialization={true}
  >
    <AddStatsigAndApollo {...pageProps} />
  </StatsigProvider>
)

你之前嵌套后报错大概率是因为Apollo初始化逻辑还留在StatsigProvider外部，调整位置后即可解决。

方案2：不改Provider结构，动态设置Apollo请求URI #

如果不想调整现有嵌套结构，可以把URI的判断逻辑从初始化阶段移到请求发起阶段，每次请求动态读取Statsig开关值：
修改apollo.js的HttpLink配置，把uri改为函数形式，每次请求触发时执行：

import { Statsig } from 'statsig-react'

// 不需要在初始化时就固定uri，改为函数动态计算
const withAuth = createHttpLink({
  uri: () => {
    // 直接从Statsig实例读值，不需要Hook也能拿到最新开关状态
    return Statsig.checkGate('newurl') ? statsigPath : oldPath
  },
  fetch: awsGraphqlFetch,
})

如果要保证首次请求就用新地址，可以在App组件加个加载态，等Statsig初始化完成后再渲染页面内容即可。

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