Relay example with Typescript in Create React App and relay hooks
This is an example app for playing with Relay in Typescript create-react-app
using https://rickandmortyapi.com/graphql
I wanted to use Relay in my Typescript CRA. for some sort of boilerplate/template/example to help me get started with Relay in my project. I wanted to use functional component and hooks but for most of the examples I stumbled upon had issues either they were not well maintained because they still are using class based components or in case of official relay hooks docs which are still experimental and are meant to be used with experimental concurrent mode. So after spending few hours researching I thought I should post an example that one can use a starting point to setup relay in there project that uses react-tools/relay-hooks(https://github.com/relay-tools/relay-hooks) which will in future allow one to migrate to official relay hooks.
From what I understand, official relay hooks are meant to work best with experimental concurrent mode since they all require you to use Suspense and that means if I use that I need to use experimental version of React and Relay.
Hooks are now stable in relay@v11 and they use Suspense for data fetching.
relay-tools/relay-hooks?It is a stable library and none of its dependencies is experimental and it allows you to immediately use react hooks with relay-runtime and it is designed for easy migration to react-relay hooks.
This is a typescript version of create react app. I just have my personal starter for CRA to ease the setup of eslint, github actions, vscode settings and more small things that I prefer to use. If you want you can just get started with npx create-react-app my-app --template typescript. For this example I have used @reach/router and TailwindCSS (for very very basic styling).
Some important dependencies:
get-graphql-schema: This is used to get the schema for your server and store it locally. This will be later used by relay-complier.relay-compiler: Relay uses the Relay Compiler to convert GraphQL literals into generated files that live alongside source files.relay-compiler-language-typescript: Language plugin for relay-compiler that allows us to create generated TypeScript files.babel-plugin-relay: This macro allows us to use GraphQL template tag in our components.src/components/relay: Set the relay-runtime environment.src/components/global: Used as a wrapper to wrap the app. We set the RelayEnvironmentProvider from relay-hooks and provide Environment from src/components/relay.If you find typos, have suggestions for me or something I did is confusing feel free to open an issue. If there are better ways to set Relay please let me know.
saihaj/saihaj-create-react-appreact-tools/relay-hooks