ReactJs - How to wrap the ApolloProvider inside the StatsigProvider?

Question

In react(nextjs) application, I am using statsig-react to switch the mastergraphql endpoint(urls). Now I am facing an issue while connecting statsig with apollo.

My app.js is like,

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>
)

In apollo.js, I am changing uri like,

import { useGate } from 'statsig-react'

const statsigFeatureOn = useGate('newurl').value

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

Here, I am getting statsigFeatureOn as false always. And If I check the useGate value in any other component which is wrapped under the StatsigProvider there will get true value(required output).

If I wrap an ApolloProvider under StatsigProvider in a normal way will not get the desired output. I tried few ways and got the different kinds of errors and output.

How can I get true value inside apollo.js at initial load itself?

Answer 1

Move the ApolloProvider and related things into a new component and return that new component within the StatsigProvider in app.js. In new component get and pass the useGate value to useApollo hook.