[0012] Configuração do React Query

[nitoba]

Olá galera, irei fazer a configuração do React Query no projeto mobile

[nitoba]

• Sugestão de organização das requisições em serviços para separar as responsabilidades

src/services

export async function getUser() {
  const result = await fetch('https://api.github.com/users/diego3g')
  return await result.json()
}

• Sugestão de organização das keys usadas no React Query usando enums

  export enum QueryKeys {
  users = 'users',
  }

Utilização

const { data } = useQuery([QueryKeys.users], getUser)

[pedro-lucaas]

Dessa forma não temos tipagem no retorno das nossas queries. Acho que já podíamos pensar nisso e montar uma estrutura que aceite isso

[pedro-lucaas]

Eu gosto de utilizar o axios. O que acham? Poderíamos na pasta services criar uma pasta api onde ficariam as configurações comuns a todas as requisições, como base url, algum token caso seja necessásrio e etc. E dentro da pasta api criarmos subpastas com as requisições.

[pedro-lucaas]

Eaí ficaria por exemplo:

import api from "..";
import { endpoints } from "../endpoints";

export async function getUser() {
  const { result } = await api.get<UserType>(endpoints.USERS)
  return result;
}

[henriqgoncalvs]

O que vcs acham de criar custom hooks pra cada requisição? Eu gosto disso pq a gente faz uma boa separação de camadas na aplicação em si.

A ideia é criar algo parecido com isso: https://github.com/hnqg/talentuzz/blob/main/src/features/jobs/api/get-job.ts E usa assim: https://github.com/hnqg/talentuzz/blob/74e92844fd730343094447e593ec5cfaa5e7d237/src/pages/dashboard/jobs/%5BjobId%5D.tsx#L13

E ai vai separando pelos use cases. Não necessariamente precisa deixar o service no mesmo arquivo (apesar de eu gostar tbm pq facilita na manutenção)

[pedro-lucaas]

@hnqg gosto dessa abordagem também. é uma boa! Torna o componente bem mais limpo e livre de coisas relacionadas a api, endpoints e etc

[nitoba]

@pedro-lucaas teriamos sim o retorno da tipagem da forma que vc colocou, mas por enquanto não sabemos se vamos utilizar o axios ou a fetch api. Ao meu ver poderiamos seguir usando o axios pq já tem a questão da tipagem assim como vc colocou passando através dos generics

[nitoba]

posso fazer a implementação do Axios junto do projeto se for do acordo de todos, o que acham @pedro-lucaas e @hnqg ?

[henriqgoncalvs]

Acho legal @nitoba, manda bala!