Switching from custom server.js to Next.js 9 API routes

[junaid33]

Issue summary

Write a short description of the issue here ↓

Since we are using a custom server.js file, Now V2 cannot be used to host the Next app. With Next.js 9, API routes were introduced. When I try to migrate the graphQL proxy and the Shopify auth middleware like so:

// pages/api/gqlproxy.js

import Koa from 'koa';
import { graphQLProxy } from '@shopify/koa-shopify-graphql-proxy';

const server = new Koa();
const handler = (req, res) => {
     graphQLProxy({shop: "testshop", password:'testpass',});
};

export default server.use(handler);

It doesn't work.

Expected behavior

What do you think should happen?

Actual behavior

What actually happens?

Tip: include an error message (in a <details></details> tag) if your issue is related to an error

Steps to reproduce the problem

1. Comment out:

// server/server.js

  server.use(
    graphQLProxy({
      version: ApiVersion.October19
    })
  );

2. Add new folder to pages called api and create a new file gqlproxy.js.

// pages/api/gqlproxy.js

import Koa from 'koa';
import { graphQLProxy } from '@shopify/koa-shopify-graphql-proxy';

const server = new Koa();
const handler = (req, res) => {
     graphQLProxy({shop: "testshop", password:'testpass',});
};

export default server.use(handler);

3. Hit the endpoint localhost:3000/api/gqlproxy and the function should mount the graphql proxy, but it does not.

Reduced test case

The best way to get your bug fixed is to provide a reduced test case.

Specifications

• Browser:
• Device:
• Operating System:

[tolgap]

@junaid33

Try looking into the source of graphQLProxy: https://github.com/Shopify/quilt/blob/master/packages/koa-shopify-graphql-proxy/src/shopify-graphql-proxy.ts

The function returns another function with this notation:

(ctx: Context, next: () => Promise<any>) => void

So you are calling this graphQLProxy function, but you're not doing anything with the actual return value: a function that expects the ctx and a next middleware handler.

[katiedavis]

I'm going to close this issue for now but feel free to continue your discussion

[jamescrowley]

@junaid33 did you manage to get this working without the custom server in the end, so we can host on their zeit/vercel?

[junaid33]

@jamescrowley No we put this issue on the back burner and just hosted the application on Heroku for now. I'm not exactly sure how to use Koa with serverless functions or if mounting the graphQL API would work. Maybe we can work together with @katiedavis to update this repo so it can be hosted on Vercel. Or maybe a sample repo showing how to use Shopify Quilt with serverless functions.

[foresttoney]

@jamescrowley @junaid33 -- Did either of you manage to get this working?

[jamescrowley]

@foresttoney unfortunately not, the way the auth libraries work appear challenging to hook into the next js routes right now.

@katiedavis I'm not sure this issue should be closed. It seems to me there would be significant benefits to switching away from the custom server (more hosting options, and simplified setup for starters), that would be worth exploring? (While @junaid33 raised a specific problem attempting to make this switch, it's a wider issue IMHO).

[enginestudios]

Anyone managed to get the pages/api routes to work as endpoints yet? It would be great if this could be possible

[bluebeel]

Hello,

I created a package to remove the custom server and managed to deploy an app shopify with only nextjs on Vercel.

The package: https://github.com/bluebeel/nextjs-shopify-auth The demo app: https://github.com/bluebeel/nextjs-shopify

It only lacks the webhooks management if I have time or if someone wants to contribute.

Cheers :) cc: @jamescrowley @foresttoney @junaid33