Início / coding / Perguntas / 78786955
Accepted
Ofir
Asked: 2024-07-24 15:39:36 +0800 CST

Consulta React - força a consulta de novos dados para um novo ID de objeto

  • 772

Estou usando a consulta react para buscar dados em uma postagem do blog, de acordo com seu ID. Quando visito uma determinada postagem do blog e navego para outra, primeiro ele me apresenta os dados da postagem anterior e, em seguida, renderiza novamente a página com as novas informações. Parece que os dados são primeiro obtidos do cache e depois atualizados.

Código:

const BlogPost = () => {
// Getting the blogPostId from the Url
  const { blogPostId } = useParams();

// Querying the blogPostData from the server using its id. (here is the problem probably...)
  const { data: blogPostData } = useQuery<BlogPostType>({
    queryKey: ["getBlogPost"],
    queryFn: () => apiClient.getPostById(blogPostId),
  });

  return (
    <div>
      <h1>{blogPostData?.title}</h1>
      <hr/>
      <p>{blogPostData?.description}</p>
    </div>
  );
};

Qualquer solução? (Quero que os novos dados apareçam imediatamente)

reactjs

1 respostas

  1. Best Answer

    O ID da postagem do blog deve fazer parte da chave.

    const { data: blogPostData } = useQuery<BlogPostType>({
  queryKey: ["getBlogPost", blogPostId],
  queryFn: () => apiClient.getPostById(blogPostId),
});

    Conforme documentado :

    Quando uma consulta precisa de mais informações para descrever seus dados de maneira exclusiva, você pode usar uma matriz com uma string e qualquer número de objetos serializáveis ​​para descrevê-la. [...] É comum passar um ID, índice ou outro primitivo para identificar exclusivamente o item:useQuery({ queryKey: ['todo', 5], ... })

    O mesmo padrão se aplica a swr, e na verdade é um tanto análogo ao que depsvocê daria useEffect.

    • 2

relate perguntas