GraphQL é uma tecnologia que está sendo usada por muitas empresas hoje (como o Facebook, por exemplo). Ele está se tornando uma alternativa importante para a construção de APIs confiáveis, escalonáveis ​​e de alto desempenho.

O Facebook lançou uma nova versão há alguns meses e está usando intensamente React, GraphQL e a versão mais recente do Relay em sua aplicação. O Facebook tem usado o Relay em produção há alguns anos e está ajudando-os a ter um aplicativo mais escalonável, estável e sustentável.

Nesta postagem, cobriremos a nova versão do Relay . Exploraremos como a versão mais recente está funcionando e como podemos criar aplicativos React e GraphQL mais confiáveis ​​e escaláveis.

Ganchos de retransmissão

Relay é uma poderosa estrutura JavaScript para trabalhar com GraphQL em aplicativos React. O Relay é diferente de outros clientes GraphQL porque é mais estruturado e opinativo.

Relay ajuda a construir aplicativos React e GraphQL mais escalonáveis, estruturados e de alto desempenho. Ele facilita a busca de dados no GraphQL, contando com as práticas recomendadas do GraphQL, como fragmentos , conexões , identificação de objeto global , etc.

A versão mais recente do Relay lançado em 9 de março de 2021 e tem uma API mais amigável ao desenvolvedor. A nova versão suporta React Suspense , embora seja um recurso experimental.

Relay Hooks são um novo conjunto de APIs para buscar e gerenciar dados GraphQL em aplicativos React usando React Hooks.

Para começar com a versão mais recente do Relay, vamos primeiro criar um novo aplicativo React usando create-react-app e configurar Relay:

 npx create-react-app graphql-relay-example--template typescript

Depois de criar nosso aplicativo React, precisamos instalar alguns pacotes para começar a usar o Relay:

 yarn add react-relay relay-runtime isomorphic-fetch yarn add--dev @ types/react-relay @ types/relay-runtime graphql relay-compiler relay-compiler-linguagem-typescript

Agora, criamos um arquivo chamado environment.tsx , que é onde iremos criar nosso ambiente Relay. A melhor maneira de usar o Relay é usar uma API GraphQL que é compatível com Relay , seguirá as melhores práticas e tornará mais fácil implementar algumas coisas, como paginação.

Dentro do nosso arquivo environment.tsx , coloque o seguinte código:

 import { Ambiente, Rede, RecordSource, Armazenar, RequestParameters, Variáveis
} de"relay-runtime";
import fetch from"isomorphic-fetch"; function fetchQuery (operação: RequestParameters, variables: Variables) { return fetch ('https://podhouse-server.herokuapp.com/graphql', { método:"POST", cabeçalhos: { Aceite:"application/json", "Content-type":"application/json", }, corpo: JSON.stringify ({ consulta: operation.text, variáveis, }), }). então ((resposta: qualquer)=> { return response.json () })
} rede const=Network.create (fetchQuery); const env=new Environment ({ rede, store: new Store (new RecordSource (), { gcReleaseBufferSize: 10, }),
}); env padrão de exportação;

Dentro de nosso index.tsx , importamos o RelayEnvironmentProvider e passamos nosso ambiente para ele:

  import React from"react";
importar ReactDOM de"react-dom";
import {RelayEnvironmentProvider} de"react-relay/hooks";
importar ambiente de"./environment"; ReactDOM.render (     , document.getElementById ('root')
);
 

Agora, temos o Relay configurado em nosso projeto e podemos começar a usar a versão mais recente e ver como funciona.

Buscando com useLazyLoadQuery

A maneira mais fácil de buscar dados com Relay é usando useLazyLoadQuery . Este gancho irá buscar dados durante a renderização, tornando-os não a maneira mais eficiente de buscar dados, mas a mais simples:

 import {useLazyLoadQuery} de"react-relay/hooks";
useLazyLoadQuery (consulta, variáveis, opções);

Veja como funciona o useLazyLoadQuery :

• query -Você precisa disso para passar seu literal de modelo de consulta GraphQL
• variáveis ​​-É um objeto que contém valores para buscar a consulta. Por exemplo, quando você deseja autenticar um usuário dentro de seu aplicativo
• options -É um objeto que você define algumas propriedades. fetchPolicy é usado para determinar se os dados devem ser armazenados em cache ou não. fetchKey é usado para forçar a reavaliação da consulta
• networkCacheConfig é um objeto que você pode definir para as opções de configuração de seu cache

O useLazyLoadQuery sempre deve ser usado dentro de um RelayEnvironmentProvider . O useLazyLoadQuery pode suspender seus dados quando uma solicitação de rede estiver em andamento, dependendo de qual fetchPolicy você escolher. Dependendo da fetchPolicy selecionada, você deve usar React Suspense para estados de carregamento em seu aplicativo.

Confira um exemplo do gancho useLazyLoadQuery :

 import React from"react";
importar o graphql de"babel-plugin-relay/macro";
import {useLazyLoadQuery} de"react-relay/hooks"; const query=graphql` query SettingsQuery { usuário atual { eu ia _eu ia o email } }
`; componente const=()=> { const data=useLazyLoadQuery ( consulta, {}, { fetchPolicy:"store-and-network", } ); Retorna ( 
 
 {data.currentUser.email} 
 
 );
}; exportar componente padrão;

Buscando com usePreloadedQuery

O usePreloadedQuery é o gancho mais recomendado para buscar dados com Relay. Ele implementa o padrão render-as-you-fetch , um padrão que nos permite carregar os dados de que precisamos e renderizar nosso componente em paralelo.

A usePreloadedQuery pode ser um pouco confusa, então vamos esclarecer como esse gancho funciona:

• usePreloadedQuery faz uso do useQueryLoader , que é outro gancho disponível na nova versão do Relay
• useQueryLoader é um gancho para carregar consultas com segurança. Ele manterá uma referência de consulta armazenada e a descartará quando o componente for descartado
• useQueryLoader foi projetado para ser usado com usePreloadedQuery
• useQueryLoader retorna um queryReference , um retorno de chamada loadQuery e um retorno de chamada disposeQuery
• Precisamos usar o retorno de chamada loadQuery de useQueryLoader primeiro, que armazenará uma referência de consulta no estado React
• Depois disso, passamos a queryReference para nosso usePreloadedQuery , o que nos permitirá buscar dados mais cedo, sem bloquear a renderização em nosso componente

A usePreloadedQuery é a maneira mais poderosa e recomendada de buscar dados com o Relay.

Confira um exemplo de uso do gancho usePreloadedQuery :

 import React, {useEffect} de"react";
importar o graphql de"babel-plugin-relay/macro";
import {useQueryLoader, usePreloadedQuery} de"react-relay/hooks"; const query=graphql` query UserQuery ($ _ id: ID!) { usuário (_id: $ _id) { eu ia _eu ia nome } }
`; componente const=()=> { const [queryReference, loadQuery, disposeQuery]=useQueryLoader (query); useEffect (()=> { loadQuery ({_id: _id}, {fetchPolicy:"store-or-network"}); return ()=> { disposeQuery (); }; }, [loadQuery, disposeQuery, _id]); Retorna (  {queryReference!=null? : nulo }  );
}; const UserComponent=({queryReference})=> { dados const=usePreloadedQuery (query, queryReference); return 
 {data.user?.name} 
;
} exportar componente padrão;

usePaginationFragment

Uma das vantagens de usar o Relay, tornar sua API GraphQL compatível com Relay e seguindo a especificação GraphQL é que torna muito fácil implementar alguns recursos, como a paginação.

O usePaginationFragment é um gancho que pode ser usado para renderizar um fragmento e paginar sobre ele:

 import {usePaginationFragment} de"react-relay/hooks";
usePaginationFragment (consulta, variáveis, opções);

Veja como funciona o usePaginationFragment :

• fragmento -Um literal de modelo de fragmento GraphQL. O fragmento GraphQL deve ter uma diretiva @connection e @refetchable , caso contrário, ele gerará um erro
• fragmentReference -Uma referência de fragmento que o Relay usa dos dados lidos para o fragmento da loja

Podemos usar o usePaginationFragment junto com o usePreloadedQuery . Confira um exemplo de uso do gancho usePreloadedQuery . Primeiro, criamos nossa consulta e fragmento:

 const query=graphql` query ProductsQuery ($ name: String!) { ... SearchProducts_products @arguments (name: $ name) }
`; fragmento const=graphql`
fragmento SearchProducts_products na consulta
@argumentDefinitions (
nome: {tipo:"String"}
depois: {type:"String"}
primeiro: {type:"Int", defaultValue: 30}
antes: {type:"String"}
último: {tipo:"Int"}
)
@refetchable (queryName:"SearchProductsPaginationQuery") {
produtos(
nome: $ name
depois: $ depois
primeiro: $ primeiro
antes: $ antes
último: $ último
) @connection (chave:"SearchProducts_products", filters: ["name"]) {
arestas {
nó {
_eu ia
nome
imagem
}
}
}
}
`;

Agora, dentro de nosso componente, passamos nossa consulta para o gancho useQueryLoader e dentro do componente filho, usamos a usePreloadedQuery :

 import React, {useEffect} de"react";
importar o graphql de"babel-plugin-relay/macro";
import {useQueryLoader, usePreloadedQuery} de"react-relay/hooks"; componente const=()=> { const [queryReference, loadQuery, disposeQuery]=useQueryLoader (query); useEffect (()=> { loadQuery ({nome: nome}, {fetchPolicy:"loja ou rede"}); return ()=> { disposeQuery (); }; }, [loadQuery, disposeQuery, nome]); Retorna (  {queryReference!=null? (): null}  );
}; const ProductComponent=({queryReference})=> { const query=usePreloadedQuery (query, queryReference); const {dados}=usePaginationFragment (fragmento, consulta); Retorna ( 
 {data.friends?.edges.map (({node})=> ( 
 {node.name} 
 ))} 
 );
}; exportar componente padrão;

useMutation

Mutações são uma parte muito importante do GraphQL. É o que nos permite criar, atualizar e excluir dados.

useMutation é o novo gancho para executar mutações com Relay. É um gancho muito simples e direto, com apenas dois parâmetros:

• mutation -Um literal de modelo de mutação GraphQL
• commitMutationFn -Uma função que será chamada em seu lugar. Esta função é opcional, na maioria das vezes você não vai precisar dela

useMutation retorna apenas dois valores:

• commitMutation -Uma função que executará a mutação
• isInFlight -Um valor para verificar se a mutação ainda está em andamento. Você pode usar o commitMutation quantas vezes quiser, então normalmente você pode usar várias mutações durante o voo ao mesmo tempo

Confira um exemplo do gancho usePreloadedQuery :

 import React from"react";
importar o graphql de"babel-plugin-relay/macro";
import {useMutation} de"react-relay/hooks"; mutação const=graphql` mutação SignInWithEmail ($ input: SignInWithEmailInput!) { SignInWithEmail (input: $ input) { símbolo sucesso erro } }
`; componente const=()=> { const [commitMutation, isInFlight]=useMutation (mutação); const onSubmit=()=> { commitMutation ({ variáveis: { entrada: { email: email, senha: senha, }, }, onCompleted: ({SignInWithEmail})=> { if (SignInWithEmail?.error) { return SignInWithEmail?.error; } updateToken (SignInWithEmail?.token); }, }); }; Retorna (     Enviar   );
}; exportar componente padrão;

Conclusão

A versão mais recente do Relay trouxe um conjunto de novas APIs que nos ajudarão a construir aplicativos React e GraphQL mais escaláveis. O uso de React Hooks pode nos ajudar a construir aplicativos mais modulares e de alto desempenho, tornando nosso código mais fácil de entender e livre de efeitos colaterais inesperados.

A postagem Novidades no Relay v11 apareceu primeiro em LogRocket Blog .

Source link