Example App of Redwood with Relay

Hey folks, long time Relay user here (since 2016) and if there’s one thing I’ve found out from Artsy alumni is that you don’t really want to go back to not using Relay after using it for a while.

So, this weekend I created an example of using RedwoodJS with Relay. This repo is a copy of what you’d get if you made a User model and then scaffolded out the app, it covers:

  • GraphQL Connections
  • Object Identifications
  • Fragment Components
  • Different uses of the Mutation APIs
  • Running the relay compiler in watch mode with yarn rw dev

All in all, it was pretty simple to do and didn’t really require fighting with Redwood which gives me enough confidence to start porting my main Redwood app to Relay and to do the work to make it easy and maintainable on the long run.

4 Likes

This sounds awesome! As someone who’s also using an alternative gql client I’m excited to see how we can make RW better at working with different clients. Especially getting the TS types flexible enough to handle different clients has proven to be non-trivial.

Yeah, Relay generates its own client-side types on a per component basis while generating the query artifact info, they are tiny and focused. So, I can effectively ignore web/types/graphql.d.ts (or add it to the tsconfig exclude list)

The edit page is a good example of typing the page props to the full query info (note that ‘user’ is opaque here, because the component doesn’t request any specifics only requesting a fragment), this is effectively 100% typed and I’d expect to not hit runtime issues from it at all as the repo scales.

Updated (and simplified) for RedwoodJS 1.0rc and Relay 13rc

3 Likes

Updated again now that I’ve been moving more of my app to Relay. I’ve cleaned up some design patterns, improved the GraphQL IDE integration and added the Relay eslint plugin.

3 Likes

This is great. I think we should we have some docs or guideline on how to use Relay in official redwood documentation.

And probably a sdl & service generator that can generate relay compatible schema.

Just want to update here.
I finally managed to use Relay and pothos-graphql inside redwood project

@muhajirdev any examples you can share? For the curious… :slight_smile: