O uso de uma API GraphQL traz vantagens distintas. Com o GraphQL, podemos solicitar os dados exatos de que precisamos, sem nunca realizar uma busca insuficiente ou excessiva. Também podemos obter vários recursos em uma única solicitação. Ao mesmo tempo, as próprias solicitações podem servir como uma forma de documentação, tornando fácil entender quais dados estão sendo usados, onde e por quê.
Mas o recurso mais interessante do GraphQL é que a API é totalmente descrita por seu esquema, incluindo todos os tipos de dados para cada consulta ou mutação possível.
Por que isso é importante?
Porque, com base nesse esquema, podemos criar automaticamente tipos TypeScript para toda a API no front-end. Além do mais, podemos facilmente gerar automaticamente ganchos React personalizados totalmente tipados para uma biblioteca de busca de dados como o React Query.
Deixe-me mostrar como.
Configurando o projeto com GraphQL
App React
Primeiro, vamos criar nosso projeto React com Create React App com o modelo TypeScript.
yarn create react-app graphql--template typescript
API GraphQL
Em seguida, precisamos de uma API. FakeQL oferece uma ótima maneira de criar uma API GraphQL simulada e implantá-la. Como usaremos a definição padrão, podemos configurar tudo simplesmente clicando em Estender JSON e em Implementar . A ferramenta gera um URL exclusivo onde podemos acessar nossa nova API.
Biblioteca de busca de dados
Agora que temos nosso aplicativo React e nossa API, é hora de configurar nossa biblioteca de busca de dados, React Query .
Vamos instalar:
yarn add react-query
Agora, configure o cliente React Query.
import {QueryClient, QueryClientProvider} de'react-query' importar Postagens de'componentes/Postagens' const queryClient=new QueryClient () const App=()=> { Retorna ( )
} exportar aplicativo padrão
Componente
Como nossa API fornece uma lista de postagens, usaremos um componente Postagens para exibi-los. Por enquanto, vamos deixá-lo vazio.
//components/Posts.tsx const Posts=()=> { Retorna ( <> )
} exportar postagens padrão
Em seguida, precisamos de uma consulta para obter a lista de postagens. Vamos defini-lo em um arquivo .graphql e colocalizá-lo com nosso componente:
# components/Posts/posts.graphql query Posts { Postagens { eu ia título }
}
Finalmente, vamos adicionar uma mutação para excluir uma postagem:
# components/Posts/deletePost.graphql mutação DeletePost ($ id: ID!) { deletePost (id: $ id)
}
Gerar automaticamente ganchos React Query digitados com TypeScript e GraphQL Codegen
Agora estamos prontos para gerar automaticamente nossos ganchos React Query personalizados e totalmente digitados com base nas solicitações que definimos anteriormente em nossos arquivos .graphql . Usaremos o Gerador de código GraphQL .
Começamos instalando-o:
yarn add graphql
yarn add-D @ graphql-codegen/cli
Em seguida, precisamos inicializar o assistente e seguir as etapas:
yarn graphql-codegen init
Primeiro, escolhemos o tipo de aplicativo que estamos construindo:
Então, definimos nosso esquema colando nosso url FakeQL.
Definimos onde nossas operações e fragmentos estão:
Nós escolhemos nossos plug-ins:
Nós escolhemos onde escrever a saída:
Vamos também gerar um arquivo de introspecção:
Precisamos nomear nosso arquivo de configuração:
Finalmente, vamos nomear nosso script graphql: codegen :
Até agora, tudo bem!
Para gerar ganchos React Query personalizados, precisamos instalar o plugin apropriado:
yarn add-D @ graphql-codegen/typescript-react-query
E adicione uma edição rápida do arquivo de configuração codegen.yml para que funcione:
overwrite: true esquema:'https://fakeql.com/graphql/2aaf00462236e8280f4c3beb197aae54' documentos:'src/**/*. graphql' gera: src/generated/index.ts: plugins: -texto datilografado -operações de digitação -typescript-react-query config: buscador: endpoint:'https://fakeql.com/graphql/2aaf00462236e8280f4c3beb197aae54'
Finalmente, precisamos executar nosso script.
yarn graphql: codegen
Terminamos! Nossos ganchos de consulta React personalizados totalmente digitados foram gerados automaticamente e adicionados diretamente à pasta gerado do nosso projeto.
Vamos vê-los em ação!
Fazendo solicitações de API
Em nosso componente Postagens , agora estamos prontos para exibir a lista de postagens:
import {usePostsQuery} de'gerado' const Posts=()=> { const {data}=usePostsQuery () Retorna ( <> {isLoading && Carregando...
} {dados && data.posts?.map (post=> ( {postar?.title}
))} )
} exportar postagens padrão
Vamos também adicionar a mutação DeletePost que definimos anteriormente.
import {useQueryClient} de'react-query'
import {usePostsQuery, useDeletePostMutation} de'gerado' const Posts=()=> { const queryClient=useQueryClient () const {data, isLoading}=usePostsQuery () const {mutate}=useDeletePostMutation ({ onSuccess: ()=> queryClient.invalidateQueries ('Posts'), }) Retorna ( <> {isLoading && Carregando...
} {dados && data.posts?.map (post=> ( {postar?.title}
))} )
} exportar postagens padrão
É isso, agora temos um exemplo de trabalho!
Conclusão
A abordagem descrita acima nos permite aproveitar ao máximo o GraphQL no front-end, automatizando a criação de tipos TypeScript para a API e a geração de ganchos React Query personalizados para cada solicitação.
Ao usá-lo, também reduzimos substancialmente a quantidade de código clichê de busca de dados que precisamos escrever. Com essas ferramentas implementadas, tudo o que precisamos fazer para criar ganchos personalizados adicionais do React Query para uma solicitação é criar um arquivo .graphql e executar o graphql: codegen roteiro. Muito legal, certo?
Curioso para brincar com o código sozinho? Encontre um exemplo completo de funcionamento em meu repo .
Boa programação! 
A postagem Fazendo solicitações GraphQL fácil com React Query e TypeScript apareceu primeiro no LogRocket Blog .
