Uma Introdução ao Redux Toolkit Query
Tags: react, redux, api
Published: 2023-03-20 11:41:29

Uma Introdução ao [Redux Toolkit Query](https://redux-toolkit.js.org/rtk-query/overview)

**Parte 1**

Segundo seus criadores, o **RTK Query** é uma poderosa ferramenta de busca e cache de dados. Ele foi projetado para simplificar casos comuns de carregamento de dados em um aplicativo da Web, **eliminando a necessidade de escrever manualmente a lógica de busca e armazenamento em cache** .

Ele  é **um complemento opcional incluído no pacote Redux Toolkit** e sua funcionalidade é construída sobre as outras APIs no Redux Toolkit.

O **RTK Query** está incluído na instalação do pacote principal do Redux Toolkit. Está disponível através de um dos dois pontos de entrada abaixo:

```js
import  { createApi }  from  '@reduxjs/toolkit/query'  
  
/* Ponto de entrada específico do React que gera automaticamente
   hooks correspondentes aos endpoints definidos */
import  { createApi }  from  '@reduxjs/toolkit/query/react'
```

A consulta RTK inclui estas APIs:

-   [`createApi()`](https://redux-toolkit.js.org/rtk-query/api/createApi): o núcleo da funcionalidade do RTK Query. Ele permite que você defina um conjunto de endpoints e descreva como recuperar dados de uma série de endpoints, incluindo a configuração de como buscar e transformar esses dados. Na maioria dos casos, você deve usar isso uma vez por aplicativo, com "uma fatia de API por URL base" como regra geral.
-   [`fetchBaseQuery()`](https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery): Um pequeno wrapper [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)que visa simplificar as solicitações. Pretendido como o recomendado `baseQuery`para ser usado `createApi`para a maioria dos usuários.

Abaixo um exemplo de uso com **React**
```js
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const jediOrderApi = createApi({
  reducerPath: "jediOrderApi",
  baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:8000/" }),
  tagTypes: ["JediOrder"],
  endpoints: (builder) => ({
    getJediOrder: builder.query({
      query: (page = 1) => `starwars?_page=${page}&_limit=5`,
      providesTags: ["JediOrder"],
    }),
    createJedi: builder.mutation({
      query: (jedi) => ({
        url: "starwars",
        method: "POST",
        body: { jedi },
      }),
      invalidatesTags: ["JediOrder"],
    }),
  }),
});

export const {
  useGetJediOrderQuery,
  useCreateJediMutation,
  reducer,
  middleware,
} = jediOrderApi;

```


A `createApi` é uma função que permite definir endpoints para uma API, gerar reducers e actions do Redux e configurar outras opções para a API. A `fetchBaseQuery` é uma função que retorna um adaptador base para fazer solicitações de API com `fetch`.

A `jediOrderApi` é criada com a configuração da `reducerPath`, que é o nome do slice na store do Redux, o `baseQuery`, que é o adaptador base para fazer as solicitações, `tagTypes`, que é uma lista de nomes de tags para identificar os dados retornados pela API, e `endpoints`, que é um objeto com as definições dos endpoints da API.

`tagTypes` é uma propriedade opcional na configuração da API slice que permite adicionar tags aos dados retornados por uma consulta ou mutação.

As tags são uma maneira de identificar os dados retornados pela API e rastrear seu estado na store do Redux. Isso é especialmente útil quando se trabalha com consultas em cache, pois permite que você atualize facilmente os dados em cache quando eles são alterados no servidor.

`tagTypes` é um array de strings que define os tipos de tag a serem usados pela API. Por exemplo, em `jediOrderApi` definido no código acima, `tagTypes` é definido como `['JediOrder']`.

Quando uma consulta ou mutação é executada, as tags especificadas em `providesTags` ou `invalidatesTags` são automaticamente geradas para cada tipo de tag definido em `tagTypes`. Essas tags são adicionadas aos dados retornados ou afetados pela consulta ou mutação, permitindo que eles sejam facilmente rastreados e atualizados na store do Redux.

Nesse caso, existem dois endpoints definidos: `getJediOrder` e `createJedi`. O `getJediOrder` é uma query que retorna uma lista de Jedi em ordem de registro, paginados com 5 Jedi por página. Ele usa o parâmetro `page` para definir a página a ser buscada e especifica que essa query fornece a tag `JediOrder`.

O `createJedi` é uma mutation que cria um novo Jedi. Ele recebe um objeto Jedi como argumento e usa esse objeto para criar uma solicitação POST para a URL `starwars`. Ele também especifica que essa mutation invalida a tag `JediOrder`.

Por fim, o código exporta as funções `useGetJediOrderQuery` e `useCreateJediMutation`, que são hooks gerados automaticamente pela `createApi` para executar as queries e mutations definidas na `jediOrderApi`. Ele também exporta o `reducer` e o `middleware`, que são o reducer e o middleware gerados pela `createApi` para gerenciar o estado da API na store do Redux.