O Relay Modern usa o Relay Compiler para converter literais graphql em arquivos gerados que vivem ao lado dos arquivos de origem. Isso significa que se eu tenho uma query chamada Home dentro da minha página, na mesma pasta dessa minha página haverá uma pasta chamada generated e ela conterá os arquivos gerados pelo relay-compiler com os dois artefatos de tempo de execução (que ajudam a ler e gravar no Relay Store). Mais informações https://chentsulin.github.io/relay/docs/relay-compiler.html
Por padrão esses arquivos gerados contem tipagem Flow, mas oque vamos ver aqui é como gerar tipos do TypeScript.
Instale o seguinte:
yarn global add get-graphql-schemayarn add relay-compiler --devyarn add graphql graphql-compiler --devyarn add typescript relay-compiler-language-typescript --dev
No seu
inclua os seguintes scripts:package.json
"update-schema": "get-graphql-schema http://localhost:5000/graphql > src/schema.graphql","relay": "./node_modules/.bin/relay-compiler --src ./src/ --schema ./src/schema.graphql --language typescript"
Então com o server rodando, nesse caso em
vamos rodar o comandohttp://localhost:5000/graphql
, com isso teremos o arquivoyarn update-schema
na nossa pasta src. Em seguida rodamos oschema.graphql
para que ele procure em nossos arquivos os schemas graphql e gere para nós os arquivos correspondentes na pastayarn relay
.__generated__
Seguindo o exemplo da query Home, vamos ver um pedaço dela dentro da nossa página também chamada de
:Home.tsx
const HomePaginationContainer = createPaginationContainer(Home,{query: graphql`fragment Home_query on Query@argumentDefinitions(count: { type: "Int" }cursor: { type: "String" }) {me {id_idname}barbecues(first: $count, after: $cursor)@connection(key: "Home_barbecues", filters: []) {edges {node {id_iddatedescriptionobservationparticipants {edges {node {participant {name}total}}}total}}}}`},...
Então após termos rodado o
vamos ter o seguinte na pastayarn relay
:__generated__
O inicio do arquivo Home_query.graphql.ts:
import { ReaderFragment } from "relay-runtime";export type Home_query$ref = any;export type Home_query = {readonly me: {readonly id: string;readonly _id: string | null;readonly name: string | null;} | null;readonly barbecues: {readonly edges: ReadonlyArray<{readonly node: {readonly id: string;readonly _id: string | null;readonly date: string;readonly description: string;readonly observation: string | null;readonly participants: {readonly edges: ReadonlyArray<{readonly node: {readonly participant: {readonly name: string | null;} | null;readonly total: number | null;};} | null>;};readonly total: number | null;};} | null>;} | null;readonly " $refType": Home_query$ref;};
Agora para usarmos essa tipagem basta importar, vamos ver:
import { Home_query as HomeQuery } from './__generated__/Home_query.graphql';interface IProps {query: HomeQuery;}const Home = ({ query }: IProps): any => {...}
Para mais informações veja meu exemplo de aplicação rodando:
Duvidas? estou a disposição.