How to deploy Next.js with GraphQL backend on Zeit Now?

Question

I have an Next.js/Express/Apollo GraphQL app running fine on localhost.

I try to deploy it on Zeit Now, and the Next.js part works fine, but the GraphQL backend fails because /graphql route returns:

502: An error occurred with your deployment
Code: NO_STATUS_CODE_FROM_LAMBDA

My now.json looks like:

{
  "version": 2,
  "builds": [
    { "src": "next.config.js", "use": "@now/next" },
    { "src": "server/server.js", "use": "@now/node" }
  ],
  "routes": [
    { "src": "/api/(.*)", "dest": "server/server.js" },
    { "src": "/graphql", "dest": "server/server.js" }
  ]
}

Suggestions?

Tom Söderlund · Accepted Answer · 2019-12-14 13:57:55Z

2

Here’s a complete example of Next.js/Apollo GraphQL running both on Zeit Now (as serverless function/lambda) and Heroku (with an Express server):

https://github.com/tomsoderlund/nextjs-pwa-graphql-sql-boilerplate

nextjs-pwa-graphql-sql-boilerplate

answered Dec 14, 2019 at 13:57

Tom Söderlund

4,7874 gold badges52 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hmmOverflow · Accepted Answer · 2019-05-29 23:46:38Z

I was getting that error until I found on a solution on the Wes Bos slack channel.

The following worked for me, but it's possible you could be getting that error for a different reason.

I'm not sure why it works.

You can see it working here

cd backend
Run npm install graphql-import
Update scripts in package.json:

"deploy": "prisma deploy --env-file variables.env&& npm run writeSchema",
"writeSchema": "node src/writeSchema.js"

Note: For non windows users make sure to place space before &&

Create src/writeSchema.js:

const fs = require('fs');
const { importSchema } = require('graphql-import');
const text = importSchema("src/generated/prisma.graphql");
fs.writeFileSync("src/schema_prep.graphql", text)

Update src/db.js:

const db = new Prisma({
typeDefs: __dirname + "/schema_prep.graphql",
...
});

Update src/createServer.js:

return new GraphQLServer({
typeDefs: __dirname + '/schema.graphql',
...
});

Update src/schema.graphql:

# import * from './schema_prep.graphql'

Create now.json

{
    "version": 2,
    "name": "Project Name",
    "builds": [
        { "src": "src/index.js", "use": "@now/node-server" }
    ],
    "routes": [
        { "src": "/.*", "dest": "src/index.js" }
    ],
    "env": {
        "SOME_VARIABLE": "xxx",
        ...
    }
}

Run npm run deploy to initially create schema_prep.graphql.
Run now

Another reply said this:

You should not mix graphql imports and js/ts imports. The syntax on the graphql file will be interpreted by graphql-import and will be ignored by ncc (the compiler which reads the __dirname stuff and move the file to the correct directory etc) In my example 'schema_prep.graphql' is already preprocessed with the imports from the generated graphql file.

Hopefully this helps.

Collectives™ on Stack Overflow

How to deploy Next.js with GraphQL backend on Zeit Now?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related