Looking for a robust Shopify app example using Next.js Apollo and Node

Solved
uriab
Shopify Partner
16 0 8

I am using this example to create an app:https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react

Unfortunately it is missing examples for some key aspects of developing a robust app such as:

 

1. Handling redirect for a start page (which could change depending on whether user already completed onboarding)

2. Handling client side routing

3. Handling subpages / sublayouts

4. Using Next.js getInitialProps or not? (on examples there is no use of it).

5. Calling the actual app's API (in addition to Shopify Admin API) - How to handle this? 

6. On the example, there is a GraphQL client proxy on the app's server. What happens my app has a GraphQL API as well? Do I need to wrap the Components with 2 ApolloProvider? How will it work together (no mention to it in Apollo docs)

 

All these points and more make the provided tutorial very basic and specific, leaving out very important aspects of developing a robust app. 

 

Any help with these issues could be very helpful. 

Thanks

 

chrisandrewca
Shopify Partner
9 0 10

Hi uriab,

 

I've created a small Shopify and NextJS example on my github. and it answers 5/6 of your questions. It uses JWT and cookies for login. Has site and app specific layouts and authenticated pages.

 

1. Handling redirect for a start page (which could change depending on whether user already completed onboarding)

- This is handled in .\client\shopify-client.js, in the redirectToShopifyAuth method.

 

2. Handling client side routing

- Uses NextJS link and Pages. More information about routing with App Bridge can be found here. 

 

3. Handling subpages / sublayouts

- See .\components\with\app-auth.js and app-layout.js for Component wrappers which provide authentication and app layouts.

 

4. Using Next.js getInitialProps or not? (on examples there is no use of it).

- It's the easiest way to get cookies from the browser or request when using server side rendering. The tradeoff is you do lose out on NextJS automatic static optimization. Does anyone know of any other options?

 

5. Calling the actual app's API (in addition to Shopify Admin API) - How to handle this? 

- There's examples of this in .\client\shopify-client.js and .\component\with\app-auth.js, and .\pages\debug.js.

 

6. On the example, there is a GraphQL client proxy on the app's server. What happens my app has a GraphQL API as well?

- I have't used the Shopify GraphQL API yet so there's no examples of this yet. I've found that you can call the shops endpoint at https://{shop}.myshopify.com/admin/api/2019-10/graphql.json. See here for more information. And if you'd like to call your apps GraphQL endpoint use your domain name and path.

 

I hope this all helps! The example on my github above is really quick to setup in run. Just be sure to create your app in the partner dashboard first.

 

Cheers,

Chris

tobjay
New Member
1 1 2

This is an accepted solution.

Thanks @chrisandrewca for sharing your code and your effort in the answer. I've been going through your code and I found it very useful.

I'm going to add my 2 cents about the only point (6) you didn't have an answer for. I know it's passed some time, but maybe it could be useful to others anyways.

@uriab you can configure the Shopify graphql proxy endpoint on a different path using koa-mount:

- change the server.js line in which the koa server use the graphqlproxy middleware

  import mount from "koa-mount";
// Mount the shopify graphql endpoint at custom path
  server.use(mount('/shopify', graphQLProxy({
    version: ApiVersion.April20
  })));

- configure the apolloclient in _app.js to fetch from the correct endpoint otherwise it will attempt to fetch only from the default /graphql url path

const client = new ApolloClient({
  uri: "/shopify/graphql",
  fetchOptions: {
    credentials: "include"
  }
});

hope it helps.

uriab
Shopify Partner
16 0 8

Thanks a lot everybody this is very helpful!

I have been working on the app for a year now and my whole team finds it extremely slow to develop with Next.js + the Embedded app infrastructure.

In addition, we do not think that a Shopify app needs SSR because its after a login wall anyway and there is no need for SEO optimizations here.

 

Does anyone happen to have a fully working example of a node + react app which is not embedded + pages navigation, and has already the auth flow built in? 

I think it could be very helpful for many developers, since the app bridge / iframe solution + embedded scheme with next is simple too cumbersome for an actual complex web system.