Support Relay 2

[metacortex]

Hi.

Any plan to support Relay Modern?

I am big fan of found,
and looking forward to use the new relay with it.

[taion]

Yeah, will update when I get a chance to wrap my mind around it all

[coleturner]

Found is my favorite router and I looked into swapping out Relay classic with rudimentary modern support. One of the walls I ran into is that Pagination and Refetch containers do not expose the query that is used when creating the component for those containers. Therefore queries would (in that scenario) have to be manually exported and decoupled from the function calls: createPaginationContainer(..., thisQuery) instead of createPaginationContainer(..., graphql template literal here)

[taion]

See facebook/relay#1687.

I'm not really planning to touch the pagination or refetch containers; instead my current plan is to have each route for Relay 2 act like a <QueryRenderer>, the way routes currently act like <Relay.Renderer>s.

[coleturner]

Looking forward to seeing how it will work. Thanks again @taion!

I am currently upgrading an app to Modern Relay and intend to continue using Found, which is why I have forked found-relay have a crude working implementation with Modern Relay:

coleturner@73a9255

<Route
    Component={Container}
    initialVariables={{
      ...
    }}
    query={query}
  />

Where initialVariables can be either an object or function(route) and query is a GraphQL template literal.

[taion]

@colepatrickturner

That's not quite optimal – since you're nesting <QueryRenderer>s, you'll end up firing off your queries serially.

I need to do an upstream change in Found to how element resolvers work to properly support concepts like leaving routes, in order to enable the proper GC behavior.

[rosskevin]

I'm doing a big change in our apps, converting to found, found-relay, and moving everything to [email protected] (modern). I see that #17 was just merged. What is the status on relay 1.0 support, and is there anything I can do to help?

[taion]

@rosskevin

If you just want to use react-relay/classic, see https://github.com/4Catalyzer/found-relay/tree/relay-1.

I'm going to merge that soon, but need to figure out release plans. I might cut a v0.2.x that supports a few minor Found API changes (https://github.com/4Catalyzer/found-relay/tree/relay-1) but still uses Relay v0.10.x, then cut a v0.3.x that supports Relay v1.x.

If you actually want to use the modern API with <QueryRenderer>, then I'm still a few days away from having something that works.

[rosskevin]

Thanks @taion - I'm looking to use the QueryRenderer version. Please ping me if I can help out.

[taion]

Nope, I should have something up in a few days.

[taion]

Thanks though!

[rosskevin]

@taion Thank you!

I'm working on converting and getting all the code ready in the meantime (including a flow type libdef for found). It seems like the relay-compiler step for persisted queries e.g. relay-compiler --src ./src --schema ./schema.json may be at odds with the approach of putting a root query on a route. All of my relay-compiler errors are related to such root queries. Arguably, I'm a graphql novice so I may be missing something simple.

I'll be interested to see your approach in a todo modern example.

[taion]

@rosskevin What error specifically are you seeing?

[rosskevin]

All on the root queries, relative to relay-todomvc we have one just like it:

import {graphql} from 'react-relay/compat'

export default {
  viewer: () => graphql`query ViewerQueriesQuery { viewer }`
}

The error will be:

Error: You supplied a GraphQL document with validation errors:
Field "viewer" of type "Viewer" must have a selection of subfields. Did you mean "viewer { ... }"?

[taion]

See #27. https://github.com/4Catalyzer/found-relay/blob/relay-modern/test/modern/Resolver.test.js specifically demonstrates how to set up queries with Relay Modern.

[taion]

Released as v0.3.0-alpha.1. See https://github.com/taion/relay-todomvc/tree/found-modern for an example.

[taion]

Note BTW there's no found-relay/lib/compat – at least, not yet. We're only just starting the move to Relay v1.x in our code base, so it hasn't come up yet. At the moment I'm not sure if it will.

[coleturner]

Thank you @taion!

[Rodeoclash]

@taion Thanks for this, it's working pretty well. Can't figure out how to get the environment / relay object on the props but I'm sure it's something I'm missing and explained somewhere in the example app 😄

[taion]

It's the same as if you're just using <QueryRenderer>s. Use like context.relay.environment or whatever.

[rosskevin]

@Rodeoclash here's a migration playbook to get to modern:
https://www.graph.cool/docs/tutorials/migrating-to-relay-modern-eijooto4se/

[Rodeoclash]

Yeah, it was a silly mistake. createFragmentContainer will inject the relay object into the props. I was trying to access it through a component mounted by the router (which only has a query).

Either way, I construct the environment in a seperate module so can easily import into whatever component needs to do a mutation.

@rosskevin Thanks for the link