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

Posted 2023-03-10

【中文标题】ReactJs - 如何将 ApolloProvider 包装在 StatsigProvider 中？

【英文标题】：ReactJs - How to wrap the ApolloProvider inside the 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 值？

【参考方案1】：

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