Apollo Client not fetching URI

Question

I am currently trying to convert my Wordpress site to a headless CMS using Next.js, GraphQL and Apollo. I'm using the WPGraphQL plugin to set up my query and everything seems fine but I keep getting an error that my localhost URL is undefined. Here is the code:

.env.local - where I set up my query uri as variable to be used everywhere.

    NEXT_PUBLIC_WORDPRESS_API_URL=https://guzmanster.test

apollo.js - process.env.NEXT_PUBLIC_WORDPRESS_API_URL ends up being "undefined". Actual Error is Error: Failed to parse URL from undefined/graphql

    import { ApolloClient, InMemoryCache } from "@apollo/client";
    
    
    export const client = new ApolloClient({
      uri: `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/graphql`,
      cache: new InMemoryCache(),
    });

It seems like everything is set how it's supposed to be based on my research. Unsure if maybe there is something in WordPress I am missing.

I have tried to replace ${process.env.NEXT_PUBLIC_WORDPRESS_API_URL} with https://guzmanster.test but get "fetch failed". I am expecting it to fetch the URI to serve what has been queried in the WPgraphQL plugin

Answer 1

You can try passing the env in your next.config.js like this.

const nextConfig = {
  ...otherNextConfigs,
  env: {
    NEXT_PUBLIC_WORDPRESS_API_URL: process.env.NEXT_PUBLIC_WORDPRESS_API_URL,
  },
}

module.exports = nextConfig;

I look thru the next docs and because you prefix with NEXT_PUBLIC_ is likely seen by the browser, I don't know if it's seen by the server and that's what's throwing the error the server and not the browser/client.