Configure Apollo only on running phases

[Nabellaleen]

Hi,

I'm using GraphQL, so I setup the ApolloProvider in the MyApp function of _app.tsx

export default function MyApp(...) {
  return (
    <ApolloProvider client={buildClient()}>...</ApolloProvider>
  )
}

The buildClient() function setup the ApolloClient by providing an HttpLink with the my backend URI.

function get_backend_uri() {
    return process.env.BACKEND_URI + '/graphql'
}

export default function buildClient() {
  const uri = get_backend_uri()
  ...
  return new ApolloClient(...)
}

The BACKEND_URI env variable come from a .env file loaded in next.config.js by dotenv :

require('dotenv').config();
module.exports =  {
  env: {
    BACKEND_URI: process.env.MY_BACKEND_URI
  }
}

The problem is : I don't have the MY_BACKEND_URI available at build-time (in my CI stack), I only have it at run-time.
And it seems that the ApolloProvider or the ApolloClient is computed for each page at build-time, and never re-computed later, so it has the wrong URI ...

How could I fix that ?

I had "hope" to use the dynamic import, but I didn't succeed to use it to import other things than "Components", and neither succeed to use it to import the ApolloProvider component

---

Even with publicRuntimeConfig it doesn't work : if the getConfig().publicRuntimeConfig object contains the right values at runtime, my get_backend_uri function have been built with hardcoded initial value, and continue to return the wrong URI at runtime ...

[Nabellaleen]

I've found a workaround by using the react-env package as shown in their nextjs example

This is not very clean, but it makes the job by providing a way to load values "at runtime"