一个nextjs14+trpc的博客项目，在新建完一个新的博客文章的时候，让之前的查询所有博客的查询失效，把最新的文章显示出来

Sat Jul 13 2024

tye25

在Next.js 14 + tRPC的项目中,有几种方法可以实现这个功能:

使用tRPC的invalidation

tRPC提供了一种方法来使缓存的查询失效。当你创建新的博客文章后,你可以使用 utils.invalidate() 方法来使之前的查询失效:

const createPost = trpc.useMutation(['posts.create'],{onSuccess:()=>{// 使所有博客文章查询失效    utils.invalidateQueries(['posts.getAll'])},})

2. 使用 React Query 的 refetchQueries

如果你使用的是React Query (通常与tRPC一起使用),你可以使用 refetchQueries 选项:

const createPost = trpc.useMutation(['posts.create'],{onSuccess:()=>{// 重新获取所有博客文章    queryClient.refetchQueries(['posts.getAll'])},})

手动更新缓存

你也可以手动更新缓存,将新创建的文章添加到现有的查询结果中:

const createPost = trpc.useMutation(['posts.create'],{onSuccess:(newPost)=>{    queryClient.setQueryData(['posts.getAll'],(oldData)=>{return[newPost,...oldData]})},})

使用 Next.js 的 revalidate

如果你使用了Next.js的ISR (Incremental Static Regeneration),你可以在创建新文章后触发重新验证:

const createPost = trpc.useMutation(['posts.create'],{onSuccess:async()=>{// 重新验证博客列表页面awaitfetch('/api/revalidate?path=/blog')},})

这些方法中,第1和第2种是最常用和推荐的方式,因为它们简单直接,并且能确保获取最新的数据。