Apollo requesting non-existent NextJS API route

Help
,
1

I posted this in the NextJS discussion but I wanted to post here as well.

I’m attempting to deploy a NextJS + Apollo Client frontend with a Keystone CMS backend app to Heroku. Locally, things work perfectly. However, when I push my frontend and backend to Heroku (each on separate apps), I get an error:

[Network error]: ServerParseError: Unexpected token < in JSON at position 0.

After much digging, I discovered that this is a 404 page that is being sent through JSON. The < is actually an open bracket to the 404 HTML page. I then discover that my frontend is not sending a request to my backend. It’s actually trying to hit an API route that does not exist. So it’s doing http://frontend.com/api/graphql instead of http://backend.com/api/graphql. I confirmed this by creating an API route, console logging the request and got the request data back. So that means Apollo (I’m assuming it’s Apollo) is ignoring the uri set up in my Apollo client and defaulting to a relative path.

I spent an insane amount of time just to figure that but now I can’t figure out where, why and how it’s happening. Any help would be greatly appreciated. Below is a snippet of my Apollo client. I’m using next-with-apollo along with Apollo Client. I’ve tried to replace uri with a link and it still produces the same results. Any ideas would be greatly appreciated.

withData.js

function createClient({ headers, initialState }) {
  return new ApolloClient({
    uri: process.env.NODE_ENV === 'development' ? endpoint : prodEndpoint,
    headers,
    connectToDevTools: true,
    ssrMode: true,
    cache: new InMemoryCache().restore(initialState || {}),
  })
}

export default withApollo(createClient, { getDataFromTree })
1 Like
2

Your apollo client should just be a client. withApollo is a higher-order component, which doesn’t even look like it’s being used on a component.

Per the docs, if you can, I recommend using ApolloProvider rather than withApollo.

// App.tsx
// ApolloProvider
const client = new ApolloClient({ ... });

const App: React.FC = () => (
  <ApolloProvider client={client}>
    <TheRestOfMyApp />
  </ApolloProvider>
)

// App.tsx
// withApollo
const client = new ApolloClient({ ... });

const App: React.FC = () => (
  <TheRestOfMyApp />
)

export default withApollo(App);