ReactJs - 如何将 ApolloProvider 包装在 StatsigProvider 中？答案

【问题标题】：ReactJs - How to wrap the ApolloProvider inside the StatsigProvider?ReactJs - 如何将 ApolloProvider 包装在 StatsigProvider 中？
【发布时间】：2021-11-09 08:32:54
【问题描述】：

在 react(nextjs) 应用程序中，我使用 statsig-react 来切换 mastergraphql 端点（urls）。现在我在将 statsig 与 apollo 连接时遇到了一个问题。

我的 app.js 是这样的，

const apollo = useApollo(pageProps)

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

return (
  <ApolloProvider client={apollo}>
   ...
   <AddStatsig />
   ...
  </ApolloProvider>
)

在 apollo.js 中，我正在更改 uri 之类的，

import { useGate } from 'statsig-react'

const statsigFeatureOn = useGate('newurl').value

const withAuth = createHttpLink({
  uri: statsigFeatureOn ? statsigPath : oldPath,
  fetch: awsGraphqlFetch,
})

在这里，我总是将statsigFeatureOn 视为false。如果我检查包裹在StatsigProvider 下的任何其他组件中的useGate 值，则会得到true 值（必需输出）。

如果我以正常方式将 ApolloProvider 包装在 StatsigProvider 下，将无法获得所需的输出。我尝试了几种方法，得到了不同类型的错误和输出。

如何在初始加载时在 apollo.js 中获取 true 值？

【问题讨论】：

标签： javascript reactjs next.js apollo statsig

【解决方案1】：

将ApolloProvider 和相关的东西移动到一个新组件中，并在app.js 中的StatsigProvider 中返回该新组件。在新组件中获取 useGate 值并将其传递给 useApollo 钩子。

【讨论】：