ReactJs

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 和相关内容移动到新组件中，并 return 在 app.js 中的 StatsigProvider 中移动新组件。在新组件中获取 useGate 值并将其传递给 useApollo 挂钩。

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

ReactJs - How to wrap the ApolloProvider inside the StatsigProvider?

javascript

apollo

next.js

statsig