Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Use query dependendo de outra instância

Estava tentando reescrever o código do projeto e me deparei com um problema:

const {data:book, isLoading: isBookLoading, error:bookError} = useQuery<IBook, AxiosError>(['GetBookBySlug', book_slug], () => BooksRequester.getBookBySlug(book_slug || ''))

const {data:autor, isLoading:isAutorLoading} = useQuery<IAutor | undefined, AxiosError>(['GetAutorById', book?.autor], () => AutorRequester.getAutorById(book!.autor))

Tem como eu executar o useQuery de autor apenas quando o book estiver carregado? coloquei dentro de um if, entretando li que não é recomendado pelo eslint

1 resposta
solução!

Olá, Antonio! Tudo bem?

Sim, é possível executar o useQuery de autor apenas quando o book estiver carregado. Para isso, você pode utilizar o recurso de dependência do React Query.

Basta adicionar a dependência do useQuery de autor como sendo o ID do livro, que é retornado pelo useQuery de book. Dessa forma, o useQuery de autor só será executado quando o ID do livro estiver disponível.

Segue um exemplo de como ficaria o código:

const {data:book, isLoading: isBookLoading, error:bookError} = useQuery<IBook, AxiosError>(['GetBookBySlug', book_slug], () => BooksRequester.getBookBySlug(book_slug || ''))

const {data:autor, isLoading:isAutorLoading} = useQuery<IAutor | undefined, AxiosError>(['GetAutorById', book?.autor], () => AutorRequester.getAutorById(book!.autor), { 
  enabled: !!book?.autor, // Habilita a query apenas quando o ID do livro estiver disponível
})

É uma possível solução, se puder testar. Valeu.

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software