next.js
next.js copied to clipboard
vercel
Example: Add with-relay
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: https://github.com/prisma-labs/nextjs-graphql-api-examples/issues/4
Documentation / Examples
- [x] Make sure the linting passes by running
yarn lint
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?
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.
@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 🚀
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).
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! 🙏
