Renderizador Relay e Consultas GraphQL no Back4App

30 min

renderizador de consulta no back4app introdução em nosso https //www back4app com/docs/react native/graphql/relay setup , aprendemos como preparar nosso ambiente relay agora você está pronto para começar a desenvolver seu aplicativo react native neste guia, você aprenderá como fazer sua primeira consulta no back4app vamos nos aprofundar no renderizador de consulta relay, entendendo seus principais princípios e usá lo para consumir seus primeiros dados do back4app objetivos obter uma visão geral do renderizador de consulta relay; fazer uma consulta na api graphql do back4app a partir de um aplicativo react native usando relay; pré requisitos aplicativo criado no painel do back4app aplicativo react native e com o ambiente relay configurado pelos documentos anteriores leia sobre relay node e conexões o que é o renderizador de consulta? assim como o react constrói uma árvore de componentes, o relay constrói uma árvore de componentes de dados isso significa que cada componente da aplicação será o proprietário de seus dados de fragmento o fragmento conterá as informações necessárias para renderizá lo na tela e o relay garante que esses dados estejam disponíveis antes de renderizar o componente gerenciando toda essa abordagem, o renderizador de consulta é um componente raiz necessário para compor esses fragmentos e preparar a consulta para ser buscada em nosso back end por que entender o renderizador de consulta? entender o uso do renderizador de consulta torna importante abstrair sua aplicação de diferentes maneiras uma boa abstração de código pode evitar horas de trabalho, erros, tempo de depuração, etc como funciona o renderizador junto com as apis do back4app no último tutorial, preparamos o arquivo do ambiente relay, que especifica as informações de conexão do back4app usando essa configuração, o relay cuidará da comunicação com as apis do back4app você não precisa se preocupar com a conexão apenas concentre se em construir os componentes de dados 1 criando uma classe no painel do back4app vamos criar sua primeira classe e populá la com alguns objetos usando o console graphql do back4app a classe person tem 2 campos name, que é uma string, e salary, que é um inteiro vá para o painel >core >console graphql e use o código abaixo 1 mutation createclass { 2 createclass(input { 3 name "person" 4 schemafields { 5 addstrings \[{name "name"}] 6 addnumbers \[{name "salary"}] 7 } 8 }){ 9 class{ 10 schemafields{ 11 name 12 typename 13 } 14 } 15 } 16 } você verá o resultado abaixo criando classe agora vamos criar alguns objetos dentro desta classe vá para a mutação de criar objeto https //www back4app com/docs/parse graphql/graphql mutation create object#mutation generic , e veja como lidar com este caso certifique se de que você está usando a versão mais recente do parse server para utilizar a notação mais recente da api graphql disponível no back4app 1 mutation createobject{ 2 createhero(input {fields {name "allana foley", salary 1000}}){ 3 person { 4 id 5 name 6 salary 7 } 8 } 9 } criando objeto agora, a classe person foi criada e possui um campo de nome e salário após criar uma nova classe, o back4app gera automaticamente todos os recursos necessários para usar o back end de forma segura um exemplo é a lista de objetos o back4app já criou as conexões necessárias para consultar a lista de pessoas pessoas para entender melhor, vá para o playground, atualize e abra a aba de docs e procure por pessoas o back4app gerou o campo de conexão você também pode consultar a classe pessoa como uma lista note que o campo query people é uma personconnection o relay consumirá o campo de conexão para renderizar uma lista dos objetos da pessoa documento do campo pessoa e a documentação do campo de conexão pessoas (pessoa) 2 atualizando o esquema é importante lembrar que se uma nova classe entrar em seu aplicativo, será necessário atualizar o esquema dentro da raiz do aplicativo react native se necessário, vá para https //www back4app com/docs/react native/graphql/download schema docs e repita os passos para atualizar o esquema 3 primeiro exemplo de contêiner de fragmento antes de continuarmos o tutorial, vamos apresentar o contêiner de fragmento vamos criar um componente que será o proprietário das informações da pessoa este componente conterá o nome e o salário da pessoa aqui você pode solicitar qualquer campo da pessoa para construir seu componente agora, vamos prosseguir com esses dois campos crie um arquivo e nomeie o como personcard js personcard js dentro dele, vamos criar um componente de função simples 1 import react from 'react'; 2	 3 const personcard = () => { 4 return ( 5 \<div> 6 7 \</div> 8 ); 9 }; substitua a linha de export default pelo código abaixo 1 export default createfragmentcontainer(personcard, { 2 person graphql` 3 fragment personcard person on person { 4 id 5 name 6 salary 7 } 8 `, 9 }); o código acima criará um fragmento de uma pessoa que solicita apenas id, nome e salário termine de atualizar o restante do componente com o seguinte código 1 const personcard = ({person}) => { 2 return ( 3 \<view> 4 \<text>name {person name}\</text> 5 \<text>salary {person salary}\</text> 6 \</view> 7 ); 8 }; o resultado final deve ser assim 1 import react from "react"; 2 import { createfragmentcontainer, graphql } from "react relay"; 3 import { view, text } from "react native"; 4	 5 const personcard = ({person}) => { 6 return ( 7 \<view> 8 \<text>name {person name}\</text> 9 \<text>salary {person salary}\</text> 10 \</view> 11 ); 12 }; 13	 14 export default createfragmentcontainer(personcard, { 15 person graphql` 16 fragment personcard person on person { 17 id 18 name 19 salary 20 } 21 `, 22 }); 4 criando o renderizador de consulta o próximo passo é criar o renderizador de consulta para sua lista de objetos o renderizador de consulta é um componente raiz para recuperar os componentes de dados e prepará los para buscar dados do backend você aprenderá como recuperar dados para uma classe de pessoa no back4app 4 1 criando o arquivo crie um novo arquivo e nomeie o personrenderer js personrenderer js copie o código abaixo e cole o no arquivo personrenderer 1 const personrenderer = () => { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql``} 6 variables={null} 7 render={({error, props}) => { 8 if (error) { 9 return ( 10 \<view> 11 \<text>{error message}\</text> 12 \</view> 13 ); 14 } else if (props) { 15 // @todo here will be implement the person card for each item from result 16 } 17 return ( 18 \<view> 19 \<text>loading\</text> 20 \</view> 21 ); 22 }} 23 /> 24 ); 25 }; 26	 27 export default personrenderer; 4 2 compreendendo as propriedades do queryrenderer vamos começar com um query renderer com suas propriedades vazias graphql, variables e render passo a passo, você implementará cada um deles de forma incremental primeiramente, sua aplicação precisa informar a consulta para o query renderer aqui, nossa aplicação consumirá uma lista de pessoas nas propriedades da consulta, cole o seguinte código 1 graphql` 2 query personrendererquery { 3 people { 4 edges { 5 node { 6 personcard person 7 } 8 } 9 } 10 }` o graphql vem do react relay e implementa a consulta como uma string é importante entender as conexões de edges e nodes a consulta acima está consumindo uma conexão de nodes de pessoas do servidor back4app cada vez que você cria uma nova classe, ela será seguida por uma conexão de nodes variáveis quando necessário, o query renderer consumirá variáveis um bom exemplo quando a aplicação solicita uma consulta para uma pessoa por id como este não é o caso agora, vamos passar null nas propriedades de variáveis populando o cartão da pessoa esta consulta retornará uma lista de pessoas o query renderer garante que os dados estarão disponíveis para renderização se não estiverem, um erro será disparado as propriedades responsáveis por isso são as render preencha as propriedades de render com o seguinte código 1 render={({error, props}) => { 2 if (error) { 3 return ( 4 \<view> 5 \<text>{error message}\</text> 6 \</view> 7 ); 8 } else if (props) { 9 return props people edges map(({node}) => \<personcard person={node} />); 10 } 11 return ( 12 \<view> 13 \<text>loading\</text> 14 \</view> 15 ); 16 }} substitua o todo comentado por um map em javascript para renderizar um cartão de pessoa para cada resultado da lista como dito, o query renderer assume a responsabilidade de tornar os dados disponíveis apenas quando estiverem prontos até lá, uma mensagem de carregamento será exibida se um erro ocorrer, ele será exibido na tela, evitando uma falha inesperada da aplicação por último, vamos melhorar a renderização da pessoa substituindo o map por uma nova função coloque isso antes do query renderer 1 const renderpersons = (people) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; e o resultado final deve ser assim 1 import react from "react"; 2 import { queryrenderer } from "react relay"; 3 import environment from " /relay/environment"; 4 import personcard from " /personcard"; 5 import { view, text } from "react native"; 6	 7 const personrenderer = () => { 8 const renderpersons = (people) => { 9 return people edges map(({node}) => \<personcard person={node} />); 10 }; 11	 12 return ( 13 \<queryrenderer 14 environment={environment} 15 query={graphql` 16 query personrendererquery { 17 people { 18 edges { 19 node { 20 personcard person 21 } 22 } 23 } 24 } 25 `} 26 variables={null} 27 render={({error, props}) => { 28 if (error) { 29 return ( 30 \<view> 31 \<text>{error message}\</text> 32 \</view> 33 ); 34 } else if (props) { 35 return renderpersons(props people); 36 } 37 return ( 38 \<view> 39 \<text>loading\</text> 40 \</view> 41 ); 42 }} 43 /> 44 ); 45 }; 46	 47 export default personrenderer; 5 fazendo sua primeira consulta agora é hora de buscar a pessoa usando o personrenderer se tudo estiver ok, sua aplicação agora tem dois novos componentes personrenderer e personcard antes de iniciar a aplicação, o relay precisa do relay compiler para rodar e gerar os tipos de componentes para isso, execute no seu terminal yarn relay no app js adicione o seguinte código 1 import react from 'react'; 2 import { safeareaview, statusbar, view, text } from 'react native'; 3	 4 import providers from ' /providers'; 5 import personrenderer from ' /components/home/person/personrenderer'; 6	 7 const app = () => { 8 return ( 9 \<providers> 10 \<statusbar barstyle="dark content" /> 11 \<safeareaview> 12 \<view 13 style={ { 14 flexdirection 'column', 15 justifycontent 'center', 16 alignitems 'center', 17 margintop 100, 18 } }> 19 \<text style={ {fontweight "bold", textalign "center"} }> 20 back4app react native relay query renderer list example 21 \</text> 22 \<personrenderer /> 23 \</view> 24 \</safeareaview> 25 \</providers> 26 ); 27 }; 28	 29 export default app; o código do app js vem originalmente do create react native app ele adicionou uma view com um estilo para centralizar o conteúdo na tela com uma margem de 10px do topo dentro dele, há um texto com um rótulo para dar algum contexto para a impressão e o personrenderer para mostrar a lista de pessoas você precisa obter o seguinte resultado renderização em nossa aplicação back4app react native, importamos o personrenderer diretamente no app js app js como o personrenderer é um componente raiz e possui seu queryrenderer, a pessoa deve ser exibida sem nenhum erro 6 digitando os componentes esta etapa faz sentido para uma aplicação que trabalha com typescript se sua aplicação não usa typescript, siga em frente um dos poderes do relay compiler é gerar os tipos de cada componente de dados vamos digitar o personrenderer e o personcard para tornar a aplicação mais poderosa digitando personrenderer digite o argumento da função renderperson pessoas pessoas no personrenderer 1 const renderpersons = (people personrendererquery\['response']\['people']) => { 2 return people edges map(({node}) => \<personcard person={node} />); 3 }; importe o personrendererquery personrendererquery tipo da generated generated pasta criada dentro da mesma pasta do personrenderer digitando personcard vá em frente para o personcard, crie um novo objeto de tipo e nomeie o como personcardprops 1 type personcardprops = {}; importe o personcard person personcard person tipo das generated generated pastas 1 import {personcard person} from ' / generated /personcard person graphql'; adicione a pessoa dentro do tipo personcardprops 1 type personcardprops = { 2 person personcard person; 3 }; nos argumentos de props do personcard, tipifique o componente com o personcardprops personcardprops 1 const personcard = ({person} personcardprops) => { } o resultado final de ambos os componentes deve ser assim personrenderer 1 import react from 'react'; 2 import {graphql, queryrenderer} from 'react relay'; 3 import {environment} from ' / / /relay'; 4 import personcard from ' /personcard'; 5 import {view, text} from 'react native'; 6 import {personrendererquery} from ' / generated /personrendererquery graphql'; 7	 8 const personrenderer = () => { 9 const renderpersons = (people personrendererquery\['response']\['people']) => { 10 return people edges map(({node}) => \<personcard person={node} />); 11 }; 12	 13 return ( 14 \<queryrenderer 15 environment={environment} 16 query={graphql` 17 query personrendererquery { 18 people { 19 edges { 20 node { 21 personcard person 22 } 23 } 24 } 25 } 26 `} 27 variables={null} 28 render={({error, props}) => { 29 if (error) { 30 return ( 31 \<view> 32 \<text>{error message}\</text> 33 \</view> 34 ); 35 } else if (props) { 36 return renderpersons(props people); 37 } 38 return ( 39 \<view> 40 \<text>loading\</text> 41 \</view> 42 ); 43 }} 44 /> 45 ); 46 }; 47	 48 export default personrenderer; personcard 1 import react from 'react'; 2	 3 import {createfragmentcontainer, graphql} from 'react relay'; 4	 5 import {view, text} from 'react native'; 6 import {personcard person} from ' / generated /personcard person graphql'; 7	 8 type personcardprops = { 9 person personcard person; 10 }; 11	 12 const personcard = ({person} personcardprops) => { 13 return ( 14 \<view> 15 \<text>name {person name}\</text> 16 \<text>salary {person salary}\</text> 17 \</view> 18 ); 19 }; 20	 21 export default createfragmentcontainer(personcard, { 22 person graphql` 23 fragment personcard person on person { 24 id 25 name 26 salary 27 } 28 `, 29 }); conclusão o resultado final do queryrenderer demonstrou como a aplicação pode ser abstraída a aplicação pode exibir a pessoa dentro do query renderer como o personcard tem mais componentes, isso não muda a forma como o query renderer foi construído o personrenderer foi construído para mostrar como uma consulta pode ser feita em passos fáceis, combinada com o poder do servidor back4app no próximo guia, você aprenderá como recuperar um objeto pessoa específico e mostrar seus atributos