Update Generated Shopify NextJS App and Documentation

[behivetech]

Issue summary

It's extremely time consuming trying to figure out how to work through a custom app due to the lack of documentation and very customized nextjs app generated by the CLI.

Expected behavior

The developer should have documentation that goes deeper than just setting up an app and should not have to spend so much time trying to get something to work when it goes beyond simple apollo queries.

What do you think should happen? Some time should be taken to update the documentation and get a little more detailed about things such as the app bridge, using bulk actions, sessions and other various graphql operations specific to the generated app as opposed to what if available via the graphql api docs. It would be nice if the generated app were to drop the server.js file and use all the options provided from the NextJS framework, such as the api routes, middleware, etc. The Apollo library should also be updated to the @apollo/client library. This repo provides a nice start nextjs-shopify-app; however it would be better if it could fully use the @apollo/client hooks to gather the data. I've made attempts to get that working, but keep running into issues where I can't get the session through the api routes.

Actual behavior

What actually happens? The generated app has some issues out of the box. Libraries are outdated, the api version is set all the way back to 2020 and it just seems like there hasn't been any maintenance efforts in quite some time. I have it somewhat working, but things like the api routes are not working and it took a great deal of time to get it in a useable state. Because of the limitations from the GraphQL API by how much data is pulled within a certain amount of time, it makes it extremely difficult to develop within those params as well so more focus around bulk qraphql calls would be ideal.

Steps to reproduce the problem

1. Generate an app through the Shopify CLI in the terminal
2. Try doing anything more than simple processes
3. Try going through any sort of documentation regarding the app.

---

Checklist

• [x] I have described this issue in a way that is actionable (if possible)

[TheApeMachine]

Didn't I read or hear somewhere the NodeJS stuff will be moving towards Express? In all honesty, I don't even know what I am saying, because I am not really a NodeJS developer, just have to do this for an extension in our company, and I feel your pain. This was needlessly difficult because the documentation is lacking. I mean, the API documentation is actually quite good, but the bits around it, not so much. On the other hand, I have a suspicion there is just too much push from some source on new features vs documentation, don't know... I found someone on Youtube that helped me along with his videos, at least enough to start working it out...

[redochka]

Felt the same thing, what an awful experience with the shopify generated code. Give this a try: https://github.com/redochka/nextjs-shopify-app-no-custom-server

[behivetech]

Felt the same thing, what an awful experience with the shopify generated code. Give this a try: https://github.com/redochka/nextjs-shopify-app-no-custom-server

Thanks @redochka. I did try that, but even that one has issues. You can't use the Apollo hooks with it and if you read far enough along you will find that the products query only works 24 hours and then the auth stops working for it.

[TheApeMachine]

@behivetech The 24-hour issue is quite easily solvable using offline access tokens. I mean, I say easy, I only found out yesterday :p But implementing is easy.

server.use(
  createShopifyAuth({
    accessMode: "offline", // By default, online.
    async afterAuth(ctx) {
      ...
    },
  })
);

[behivetech]

@TheApeMachine based on your server.use code, that would mean you would need to create a custom server for that NextJS repo which defeats the purpose.

[TheApeMachine]

@behivetech I don't know what you're talking about, to be honest (like I said, not super familiar with NodeJS or anything around it), this is how I have it in my code, the only thing I added "custom" is the accessMode line...

[TheApeMachine]

Ah, mind you, I am not using that custom NextJS repo, I am using the NextJS code generated by the shopify-cli So in the case of that other repo, it seems to be here: https://github.com/redochka/nextjs-shopify-app-no-custom-server/blob/main/lib/shopify.js?ts=4

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. It will be closed if no further action occurs in 14 days.

[github-actions[bot]]

We are closing this issue because it has been inactive for a few months. This probably means that it is not reproducible or it has been fixed in a newer version. If it’s an enhancement and hasn’t been taken on since it was submitted, then it seems other issues have taken priority.

If you still encounter this issue with the latest stable version, please reopen using the issue template. You can also contribute directly by submitting a pull request– see the CONTRIBUTING.md file for guidelines

Thank you!