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

Question

在 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 值？

Answer 1

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