Next.js Discord

Discord Forum

ApolloServer - NextJs Integration

Unanswered
Himalayan posted this in #help-forum
Open in Discord
HimalayanOP
I am using this integration:

https://github.com/apollo-server-integrations/apollo-server-integration-next

To create an Apollo Server in my next app.
I am also using Apollo Client SSR to connect to the server.

This works fine locally but when deploying to vercel the server side fetch from the client to the Apollo Server fails when building.
I imagine this is because the server isn't running when the fetch is made?

The client creates a HttpLink and then checks whether it is deployed to vercel or running locally.

const dbLink = createHttpLink({
  uri: `${process.env.VERCEL_URL || "http://localhost:3000"}/api/server`,
});


As I say, locally this works fine.
But when deployed to vercel, VERCEL_URL is returning correctly however the request fails due to a network error

  networkError: TypeError: Failed to parse URL from neil-morgan-vy9aq8lxw-neil-morgan.vercel.app/api/server
      at Object.fetch (node:internal/deps/undici/undici:11457:11)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
        at new NodeError (node:internal/errors:399:5)
        at new URL (node:internal/url:560:13)
        at new Request (node:internal/deps/undici/undici:7041:25)
        at fetch2 (node:internal/deps/undici/undici:10598:25)
        at Object.fetch (node:internal/deps/undici/undici:11455:18)
        at fetch (node:internal/process/pre_execution:230:25)
        at r (/vercel/path0/.next/server/chunks/494.js:454:76)
        at doOriginalFetch (/vercel/path0/node_modules/next/dist/server/lib/patch-fetch.js:273:24)
        at /vercel/path0/node_modules/next/dist/server/lib/patch-fetch.js:392:20
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
      input: 'neil-morgan-vy9aq8lxw-neil-morgan.vercel.app/api/server',
      code: 'ERR_INVALID_URL'
    }
  },

14 Replies

fuma
VERCEL_URL doesn't contain the protocol, you need to use https://${process.env.VERCEL_URL} rather than process.env.VERCEL_URL
Eric Burel
Just as a sidenote, Next.js is not the best host for an Apollo server in my opinion
putting your Apollo server in an API route forces you to call it from the client
that's fine if you are creating a SaaS, with highly dynamic requests
but if you are building a content orientend app, where performances matters more and queries are simpler, it may be more efficient to have a separate GraphQL API (say using Express) and call it only server-side in your app, in React Server Components for instance
saying that because Apollo Client is great but fat, and integrating Apollo with Next is not most intuitive thing in the world
HimalayanOP
Will give it a try @fuma thank you.
Also @Eric Burel, thank you. Adding your comments here to my notes for thought
HimalayanOP
@fuma your suggestion was correct however I encounter a new error

ApolloError: Unexpected token < in JSON at position 0


Which is ofcourse because the server is returning an HTML error page.
Looking in the HTML it seems "This deployment is building" is the issue.

So at the time the apollo client makes the server side request, the server isn't actually ready?
Unsure how this integration is meant to deploy if the server needs to be running for it to deploy.
The server can't be running if it hasn't deployed 😄
the server has to be already running in this case
a solution to bypass this is to call the graphql graph "directly" instead of using an HTTP link
haven't done that in years so I don't have the documentation at hand but look for stuff like "schema link" or smth like that
If you don't need SSR, you can instead wrap your app with NoSSR to completely avoid the need for server-side calls to your graphql API