Relay Modern Example

Relay Modern is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation.

Download schema introspection data from configured Relay endpoint

npm run schema
# or
yarn schema

Run Relay ahead-of-time compilation (should be re-run after any edits to components that query data with Relay)

npm run relay
# or
yarn relay

In a new terminal

Run the project

npm run dev
# or
yarn dev

Relay 11: https://github.com/facebook/relay/releases/tag/v11.0.0 Relay Hooks: facebook/relay#3371

Things to steal from:

https://danielwoelfel.com/post/1/ssr-with-relay-on-nextjs-how-to-determine-if-data-is-from-the-cache-or-network

Why styled-components tgz?

Check out first unreleased feature!

https://github.com/styled-components/styled-components/blob/master/CHANGELOG.md

Styles are broken with Web Components when built - works fine when served!

This appears to be a bug with styled-components - hoping v6 makes css-in-js for Web Components viable!

Until then, I used css modules for a button or two, but it is not fun to work with.