Configuração Técnica do Relay em React Native com GraphQL

configuração do relay introdução em nosso guia anterior, aprendemos como obter o arquivo de esquema, salvá lo e colá lo em nossa aplicação react native neste guia, vamos instalar o relay e preparar nosso ambiente para começar a desenvolver uma aplicação react native objetivo para configurar o relay, precisaremos primeiro instalar o relay em nossa aplicação react native e, em seguida, preparar o ambiente do relay pré requisitos recomendamos um entendimento básico dos seguintes tópicos https //relay dev/ , https //babeljs io/ , javascript (ecs5 e ecs6), https //github com/graphql/graphql js readme um projeto básico react native rodando em seu ambiente local um arquivo schema graphql baixado em seu projeto react native nos passos seguintes, você encontrará uma instalação básica do relay focada em uma aplicação react native se você quiser se aprofundar neste tópico, visite a https //relay dev/docs/en/installation and setup#docsnav 1 instalando a api oficial do react relay vamos começar instalando a biblioteca oficial react relay esta biblioteca é a api oficial da equipe do relay e tem tudo para construir os fragmentos de dados 1 yarn add react relay\@10 0 0 importante instalar o relay modern para este tutorial com a versão 10 0 0 a partir da versão 11 0 0, a abordagem para usar o react relay é diferente por causa dos novos hooks 2 configuração do relay a configuração do relay contém as informações necessárias para o relay compiler dentro dela, especificaremos onde o relay compiler pode encontrar o schema file, quais pastas devem ser pesquisadas e outras configurações vamos primeiro instalar o pacote relay config 1 yarn add dev relay config nota este tutorial usa yarn como cliente de pacotes, mas você pode usar npm de qualquer forma agora vamos criar o arquivo de configuração do relay onde o relay encontrará o caminho do schema crie um novo arquivo dentro da raiz da aplicação nomeie o como relay config js abra o arquivo e salve o com as informações abaixo 1 module exports = { 2 schema ' /data/schema graphql', 3 src ' /', 4 }; 3 plugin babel relay para converter os artefatos graphql em tempo de execução, precisamos instalar um plugin babel 1 yarn add dev babel plugin relay graphql agora, dentro do seu arquivo de configuração babel, você deve adicionar o plugin relay babel no array de plugins o arquivo final babel config js ficará assim 1 { 2 "plugins" \[ 3 "relay" 4 ] 5 } em projetos expo, siga a mesma abordagem adicionando o array de plugins dentro do babel config js logo após o array de presets o resultado final deve ser assim 1 module exports = function (api) { 2 api cache(true); 3 return { 4 presets \[ 5 "babel preset expo", 6 ], 7 plugins \[ 8 'relay' 9 ] 10 }; 11 }; o plugin relay deve ser executado antes de outros plugins para uma transformação correta dos artefatos graphql verifique a documentação do plugin babel para saber mais 4 compilador relay desde nossa primeira documentação, temos explicado sobre o compilador relay para que nossa aplicação compile nossos fragmentos de dados, vamos instalá lo agora 1 yarn add dev relay compiler vamos abrir nosso package json e configurar um novo comando de script para executar o compilador relay 1 " relay relay " " relay compiler relay compiler watchman false watchman false " watchman é responsável por configurar se o compilador relay deve estar procurando por alterações nos fragmentos relay se verdadeiro, ele será executado a cada alteração se falso, ele será executado após você executar o yarn relay por conta própria o arquivo package json deve ficar assim 1 "scripts" { 2 "android" "react native run android", 3 "ios" "react native run ios", 4 "start" "react native start", 5 "test" "jest", 6 "lint" "eslint ", 7 "relay" "relay compiler watchman false" 8 }, 5 run yarn relay finally, with installation steps done, we can run the yarn relay command on the root of the application 1 yarn relay since we don’t build any data fragment, the relay compiler returns any file changed nice, your application has the relay already installed and configured now, let’s implement our environment to start making requests to the back4app server 6 preparing the fetch environment the relay environment defines how the network layer will handle the requests and how the relay store must work the store controls our data on the frontend by updating it only when changed and caching it a simple environment will need at least the network layer and the store camada de rede a https //relay dev/docs/en/network layer é fácil de construir ela lidará com cada solicitação da nossa aplicação, fazendo consultas, mutações e assinaturas (se sua aplicação suportar) consumindo a, o relay saberá como preparar as chamadas para acessar o servidor da aplicação armazenamento relay o https //relay dev/docs/en/relay store html é responsável por atualizar os dados da nossa aplicação no lado do cliente cada solicitação pode ter uma função de atualização dentro da função de atualização, você pode usar uma lista de funções auxiliares para atualizar seus dados com a interface de armazenamento para preparar o ambiente relay, precisamos criar um arquivo de configuração do ambiente o arquivo será lido pelo renderizador de consultas toda vez que uma consulta for realizada vamos preparar este arquivo 6 1 criar o arquivo de ambiente seguiremos o princípio de design da biblioteca relay, o conceito de colocação para começar, vamos criar uma pasta na raiz da aplicação e nomeá la de relay dentro dela, crie um arquivo e nomeie o de environment js environment js 6 2 configurar o ambiente depois disso, importe de relay runtime relay runtime tudo o que precisamos 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 6 3 configurar a camada de rede a camada de rede precisa de uma função para buscar os dados do servidor primeiro de tudo, vamos criar uma função de busca responsável por realizar uma requisição post 1 const fetchquery = async (request, variables) => { 2 const body = json stringify({ 3 query request text, 4 variables, 5 }); 6	 7 const headers = { 8 accept 'application/json', 9 'content type' 'application/json', 10 'x parse application id' 'x parse application id', 11 'x parse client key' 'x parse client key', 12 }; 13	 14 try { 15 const response = await fetch(`https //parseapi back4app com/graphql`, { 16 method 'post', 17 headers, 18 body, 19 }); 20 21 const data = await response json(); 22 23 if (data errors) { 24 throw data errors; 25 } 26 27 return data; 28 } catch (err) { 29 console log('err on fetch graphql', err); 30 31 throw err; 32 } 33 }; nós encapsulamos a requisição para o backend em um try catch um erro será lançado e a aplicação lidará com isso caso contrário, seguirá o comportamento normal e retornará os dados na camada de rede é também onde você configura a conexão do seu aplicativo com o servidor no back4app, usamos duas chaves principais application id e client key as chaves devem ser informadas nos cabeçalhos, assim como a url do servidor para obter essas informações, vá para seu app e clique em api console > menu graphql com o console graphql aberto, você verá a url na parte superior e na parte inferior as chaves do aplicativo necessárias substitua com suas informações a função de busca lembre se de não expor a chave mestra 6 4 exporte o ambiente o relay runtime fornece as funções necessárias para consumir a camada de rede e cria o armazenamento finalmente, vamos combiná los em um novo ambiente e exportá lo para nossa aplicação use o código abaixo no seu arquivo de ambiente 1 const environment = new environment({ 2 network network create(fetchquery), 3 store new store(new recordsource()), 4 }); 5	 6 export default environment; o arquivo final do ambiente ficará assim 1 import { 2 environment, 3 network, 4 recordsource, 5 store, 6 } from 'relay runtime'; 7	 8 const fetchquery = async (request, variables) => { 9 const body = json stringify({ 10 query request text, 11 variables, 12 }); 13	 14 const headers = { 15 accept 'application/json', 16 'content type' 'application/json', 17 'x parse application id' 'x parse application id', 18 'x parse client key' 'x parse client key', 19 }; 20	 21 try { 22 const response = await fetch(`https //parseapi back4app com/graphql`, { 23 method 'post', 24 headers, 25 body, 26 }); 27 28 const data = await response json(); 29 30 if (data errors) { 31 throw data errors; 32 } 33 34 return data; 35 } catch (err) { 36 console log('err on fetch graphql', err); 37 38 throw err; 39 } 40 }; 41	 42 const environment = new environment({ 43 network network create(fetchquery), 44 store new store(new recordsource()), 45 }); 46	 47 export default environment; conclusão incrível agora, com o relay e o ambiente relay instalados e configurados, é hora de começar a consumir a api graphql do back4app portanto, o próximo passo é criar nosso primeiro renderizador de consulta e comunicá lo ao nosso servidor