Example: Add with-relay

[jesstelford]

Adds examples/with-relay which uses the latest version of Relay known as "Relay Hooks".

Relay Modern is now (ironically?) out of date. I have removed the existing examples/with-relay-modern example as per @alunyov's suggestion to avoid confusion.

Note that I have used the SWAPI GraphQL API in with-relay. This differs from the other examples (with-apollo, with-relay-modern, etc) which use the Prisma example GraphQL API because I was getting errors when attempting to query it: prisma-labs/nextjs-graphql-api-examples#4

Documentation / Examples

• Make sure the linting passes by running yarn lint

[alunyov]

This looks cool!

What do you think about making just one example: with-relay? (Renaming old with-relay-modern) and adding the changes form this PR to it?

[dylanOshima]

Just to note if this ever gets shipped: I pulled your PR and was getting hydration errors in the initial launch. These errors go away when I go to another page and comes back, thus I suspect it has something to do with some mismatch in the initial launch. Not familiar enough with Relay to give more help unfortunately :(.

Other side note is that the relay-modern example seems to be busted, I'm getting missing fragment errors on initial start-up. So I think deleting it and replacing it with this one would be a much cleaner approach for n00bs like me.

[jesstelford]

@dylanOshima I've fixed those hydration errors: It was my fault for rendering a <p> inside a <li>. I've simplified the HTML so those errors don't happen anymore 👍️

@alunyov Good idea! I've removed with-relay-modern, and added this Relay Hooks example as with-relay. Much cleaner :)

I've also expanded the example to include lazy loading & render-as-you-fetch with usePreloadedQuery 🚀

[MoOx]

Would be nice to have this merged as a reference, it's confusing out there between outdated with-relay-modern and relay-nextjs not being straight forward to setup (and probably at the same time "too complicated" and not flexible enough to work easily with something like next-auth).

[balazsorban44]

Let's not delete this file and rather mention that this example is now moved.

[MoOx]

I find this counter productive. It's will only add more confusion to new comers now that "relay modern" is just "relay".

[balazsorban44]

The reason we don't want to remove old examples is that there might exist a lot of links out there that still point to that location. We want the developer to know that the example has moved.

[jesstelford]

So remove all the example code, but leave a single README with a link to the new example?

[balazsorban44]

Correct 👍

[leerob]

Closing as stale – if you would like to continue this, please open a new PR and we can take a look. Thank you so much! 🙏