Work on examples/5-nextjs

[zenflow]

The nextjs example was pretty minimal and seemed to need a little love, so I took the liberty of fixing it up and making it more of an example.

Before:

After:

• 4890a5e Minimal changes to get example working (& on windows). Integrated some apparent changes to the rest of the codebase:
  • the mst-gql cli seems to have been picking up another mst-gql.config.js file (the one in examples/2-scaffolding) and using that, (and erroring about a missing graphql-schema.json) so I created a correct one to be picked up
  • ./scripts/install-mst-gql.sh does not exist anymore
  • need "scripts": {"postinstall": "../../node_modules/.bin/relative-deps"} in package.json same as other examples
  • mst-gql's package build script seems to arbitrarily use quotes around one of the command terms. Windows shell (cmd.exe) doesn't strip quotes. Since there seems to be no use for the quotes (the term has no variables or spaces or special characters), I removed them.
• 92303d0 Upgraded all deps except typescript (which was causing some errors that are beyond me). This included upgrading nextjs to version 9 which introduces first-class support for typescript.
• 44eb75e Combined graphql & nextjs servers into express server. While not really necessary to demo how mst-gql works with SSR, I think it's a better example to run only one service (on only one port) since that's probably how we want it when we're working on an app that will be deployed.
• 3770d9e Remove unused isomorphic-fetch dependency
• 012afc1 Simplified & enhanced MyApp component.
  • only getSnapshot and applySnapshot when on server
  • when rendering <MyApp> give it the pageProps prop that it normally gets (so we don't break use of page-level getInitialProps)
  • pass in store when calling the page's getInitialProps so it could be used there, e.g. for pre-fetching data
• f0ca9aa Expanded on graphql schema.
  • Added doneTodos query
  • Added User type and give Todo an assignee: User property.
• 298fc7c Expanded on ui
  • Made todos toggleable
  • Added "Done Todos" view
  • Added assignee to view of todo

This to me is now a good little sandbox to demo & play with this library working in an SSR setup. It demonstrates a few issues, including #91 and a couple others (relevant to SSR scenarios) I will be documenting shortly.

This 5-nextjs example could also serve as a decent little boilerplate for a mst-gql + nextjs + apollo app. There are some other enhancements to this end that I haven't yet ported from my personal repo of this (https://github.com/zenflow/mst-gql-next)

• integration with graphql-deduplicator
• pattern for modularizing the server schema.js
• for a production setting, use correct host & port to connect to graphql server (i.e. not always localhost:3000)

Should I add them here? Or do you think these kinds of things should be out of scope for this example project? I think it would be great if we had a shared robust starting-point for this type of project.

Hope someone wants to merge this! If not, that's ok too 👍

[chrisdrackett]

@zenflow this looks awesome! I've set aside time on Thursday for most-gql stuff so I'll get to this then (unless someone beats me to it)

[mtsewrs]

lgtm

[zenflow]

Added one commit

• f002ece Add other page to allow client-side rendering index page. It's nice to be able to go to the /other route and click a link to / to get the page rendering entirely client-side so you can use chrome devtools for observing/debugging.

[chrisdrackett]

@zenflow this looks good to me as well!

My thoughts on further building this out as a boilerplate: I'm torn on the best way to handle this. On one hand I think the examples should keep things as minimal and simple as possible so people can focus on just the mst-gql stuff without being distracted or having to learn other new stuff at the same time. That being said, I think this is covered by some of the early examples. As we get into examples like this one things are inherently more complicated. I guess I could see this going either way.

That being said in either case I'm all for either including or linking to more extensive boilerplates or similar. I'd be happy to take my current stack (Prisma + nexus server) and build it out as a starter / example.

For now I'm going to go ahead and merge this, but we can always add more to it later!