GraphQL Relay e Back4App: Guia Técnico para Desenvolvedores

comece com graphql relay introdução neste guia, você aprenderá o que é relay, como trabalhar com esquema e entender como trabalhar com graphql no back4app pré requisitos este ainda não é um tutorial, mas para se sentir confortável ao lê lo, você precisará conhecimento básico de javascript entendimento básico sobre graphql se você não tiver, o graphql js https //github com/graphql/graphql js é um lugar perfeito para começar relay relay é um cliente graphql desenvolvido pela equipe de engenharia do facebook e projetado para desempenho ao construir aplicações orientadas a dados mais precisamente, relay é uma estrutura para buscar e gerenciar dados graphql de forma declarativa no lado do cliente, que utiliza convenções rigorosas para ajudar sua aplicação a ter sucesso foi construído com escalabilidade em mente para alimentar aplicações complexas como o facebook o objetivo final do graphql e do relay é fornecer interações instantâneas de resposta da interface do usuário uma das principais vantagens de usar graphql é que você pode buscar com uma única consulta todos os dados necessários para construir uma página de aplicativo, por exemplo claro que isso é bom (você pode economizar viagens ao servidor), mas com isso vem um problema você pode usar consultas diferentes para o mesmo componente ao reutilizar esse componente em diferentes partes do seu aplicativo para evitar esse tipo de problema, o relay usa um conceito importante colocalização colocalização ao usar o relay, os componentes e suas necessidades de dados vivem juntos as necessidades de dados dos componentes são declaradas dentro deles isso significa que todos os componentes declaram os dados de que precisam o relay garante que cada componente tenha os dados de que precisa quando é renderizado a estrutura do relay por trás do conceito de colocalização são os contêineres o mais comum é o contêiner de fragmento do relay o contêiner é o componente que tenta atender à necessidade de dados ao renderizar cada componente os contêineres declaram sua dependência de dados usando fragmentos graphql cada componente terá seu próprio contêiner de fragmento o contêiner não busca os dados diretamente; ele apenas declara a especificação para os dados necessários ao renderizar os dados serão buscados no lado do servidor o relay garantirá que os dados estejam disponíveis antes que a renderização ocorra o relay compõe uma árvore de dados com esses contêineres, ignorando as redundâncias e buscando os dados no servidor vamos ilustrar o conceito com um exemplo um fragmento é uma seleção de campos em um tipo graphql o relay trabalha com fragmento, paginação e contêiner de refetch o mais comum é um contêiner de fragmento veja abaixo um fragmento em graphql e depois o mesmo no relay 1 query health { 2 health 3 } 1 type homeprops = { 2 query home query; 3 }; 4&#x9; 5 const home = ({query} homeprops) => { 6 return ( 7 \<view> 8 \<text>api health {query health ? 'health' 'not health' }\</text> 9 \</view> 10 ); 11 }; 12&#x9; 13 const homefragment = createfragmentcontainer(home, { 14 query graphql` 15 fragment home query on query { 16 health 17 } 18 `, 19 }); 20&#x9; 21 export default createqueryrenderermodern(homefragment, home, { 22 query graphql` 23 query homequery { 24 home query 25 } 26 `, 27 hidesplash true, 28 }); no primeiro código, você pode ver a versão graphql que nos permite dividir esta consulta em fragmentos reutilizáveis no próximo código, você pode ver a versão relay que está mostrando os fragmentos e os dados juntos no mesmo componente colocação significa que as definições de dados e as definições de visualização vivem juntas a colocação tem alguns benefícios precisamos apenas declarar exatamente os dados que precisamos isso significa que é difícil buscar dados em excesso, o que melhora nossa aplicação, e é difícil buscar dados em falta, o que previne erros com dados ausentes outro conceito importante é a mascaramento de dados, que significa que os componentes só podem acessar os dados que solicitaram o mascaramento de dados ajuda a prevenir erros de dependência além disso, os componentes só são atualizados se os dados que estão usando mudarem renderizador de consulta moderno recomendamos dar uma olhada na documentação oficial do renderizador de consulta https //relay dev/docs/en/query renderer html#docsnav para uma melhor compreensão com base nos contêineres de fragmento, o relay os lerá e fará a solicitação ao servidor com base nos dados que possuem mas, como essa requisição acontece? é aqui que o renderizador de consulta moderno entra o renderizador de consulta moderno é o componente que lê os contêineres de fragmento, faz a solicitação ao servidor e retorna os dados ao componente todo componente raiz terá um renderizador de consulta moderno fazendo essa solicitação no exemplo acima, temos uma abstração para que passemos apenas o fragmento que deve ser lido e assim todo o resto do trabalho é feito dentro do createqueryrenderermodern na próxima etapa do documento, entraremos no createqueryrenderermodern para entender a abstração com base no exemplo puro acima abaixo está um exemplo puro de query render modern 1 export default function artistrenderer({artistid}) { 2 return ( 3 \<queryrenderer 4 environment={environment} 5 query={graphql` 6 query queryrenderersartistquery($artistid string!) { 7 # the root field for the query 8 artist(id $artistid) { 9 # a reference to your fragment container 10 artistheader artist 11 } 12 } 13 `} 14 variables={ {artistid} } 15 render={({error, props}) => { 16 if (error) { 17 return \<div>{error message}\</div>; 18 } else if (props) { 19 return \<artist artist={props artist} />; 20 } 21 return \<div>loading\</div>; 22 }} 23 /> 24 ); 25 } podemos ver que o query renderer modern é um componente hoc https //reactjs org/docs/higher order components html em outras palavras, envolva o componente que possui o contêiner com os dados a serem solicitados, faça a solicitação com o ambiente relay e retorne os dados para baixo passando para o componente geração automática de tipos trabalhando com relay, podemos construir um aplicativo de forma segura em relação a tipos como dissemos, cada componente será o proprietário de seus dados portanto, quando executamos o relay compiler, ele lê cada fragmento de dados e faz uma verificação com seu esquema graphql se todas as verificações do compilador relay estiverem ok, os tipos serão gerados em uma pasta chamada generated esta pasta é criada dentro das pastas dos componentes raiz veja o exemplo abaixo componente home verificando a saúde da api 1 const home = ({query} homeprops) => { 2 return ( 3 \<view> 4 \<text>api health {query health ? 'health' 'not health' }\</text> 5 \</view> 6 ); 7 }; 8&#x9; 9 const homefragment = createfragmentcontainer(home, { 10 query graphql` 11 fragment home query on query { 12 health 13 } 14 `, 15 }); 16&#x9; 17 export default createqueryrenderermodern(homefragment, home, { 18 query graphql` 19 query homequery { 20 home query 21 } 22 `, 23 hidesplash true, 24 }); pasta gerada contendo os tipos para o componente home e os tipos gerados depois disso, só precisamos importar o tipo no componente e compô lo 1 import {home query} from " / generated /home query graphql"; 2 3 type homeprops = { 4 query home query; 5 }; o tipo é gerado em flow, a linguagem principal para tipos do facebook mas, com uma biblioteca, você pode gerar em typescript isso é mais comum para trabalhar com react native resumindo, com o compilador relay, podemos verificar a implementação dos dados antes do tempo de execução isso nos ajuda a prevenir bugs e, assim, melhorar a qualidade da aplicação e o tempo de desenvolvimento nas consultas, podemos evitar dados duplicados em n componentes diferentes ele verifica se alguns dados são duplicados se houver, ele removerá as redundâncias isso reduzirá o tamanho da carga útil das consultas e aumentará ainda mais o desempenho da aplicação desenvolvendo nas consultas, podemos evitar dados duplicados em n componentes diferentes ele verifica se alguns dados são duplicados se houver, ele removerá as redundâncias isso reduzirá o tamanho da carga útil das consultas e aumentará ainda mais o desempenho da aplicação no lado do servidor back4app back4app gera uma api graphql compatível com relay pronta para uso em seu projeto o que o back4app gera para você, para que você não precise construir por conta própria no lado do servidor infraestrutura no painel do back4app, você pode criar um modelo de dados completo com classes, tipos e tudo mais que um banco de dados precisa você não precisa se preocupar em configurar e manter o servidor por conta própria após criar seu modelo de dados, o back4app gerará tudo o que é necessário para consumi lo no lado do frontend usando graphql vamos dar uma olhada no esquema da api graphql esquema o arquivo de esquema é o núcleo de qualquer aplicação graphql ele descreve todo o servidor disponível para ser usado no lado do cliente o relay funciona usando seu arquivo de esquema para confirmar a string de consultas e o arquivo gerado para aparecer em / gerado /mycomponent graphql, como dissemos no tópico geração automática de tipos para usar o relay compiler, você precisa de um arquivo de esquema graphql graphql ou json que descreva a api do seu servidor graphql esses arquivos são representações locais de uma fonte de verdade do servidor e não são editados todo esquema de graphql pode ser composto por tipo de consulta, tipo de mutação e tipo de assinatura para trabalhar com um esquema sendo consumido pelo relay no frontend, você precisa de alguns conceitos fundamentais no backend interface de nó e conexão recomendamos a leitura sobre interface de nó e conexões relay para tornar esta leitura mais fácil de abstrair interfaces de nó a interface de nó implementa todos os tipos no graphql para ajudar a buscar dados via id esta é uma implementação para facilitar a busca de dados do servidor e sua atualização assim, cada dado de cada tipo terá um id único, chamado de id único global, sendo implementado por uma interface de nó com o nó, o relay evita consultas aninhadas e realiza a busca e re busca utilizando o isso é difícil de implementar e requer um pouco de trabalho, mas já construímos isso para você! paginação construído para ser composto, tanto no front end quanto no back end, o relay nos ajudará a compor nossos dados também para trabalhar com paginação, temos conexões essas conexões implementam o nó do tipo que estamos buscando e têm um modelo padrão, facilitando a implementação da paginação no lado do servidor felizmente, novamente, já temos isso construído para usar no front end conclusão neste guia, apresentamos o que é o relay, seus principais conceitos e como funciona também pudemos ver como o back4app automatiza a criação do servidor graphql e nos entrega um banco de dados completo com api graphql para trabalhar resumindo, todo o backend já está construído pelo back4app você só precisa criar seus tipos no painel e começar a consumir com base no esquema gerado na próxima seção, explicaremos como lidar com esse esquema no front end e como preparar seu ambiente para usar o relay também temos um livro de receitas graphql https //www back4app com/docs/parse graphql/graphql getting started , você pode usá lo para ajudá lo a entender mais conceitos em nosso painel