next.js - 缓存已更新，但 UI 在删除突变 NEXTJS SSR 后更新缓存时不会更改

Question

我正在尝试使用 SSR 在 Nextjs 中进行突变后更新缓存。我能够更新缓存，但UI 不反映对缓存的更改。

在使用 getServerSideProps 获取数据时，由于服务器设置了缓存，因此无法更新 UI？

这是我更新缓存的代码。

onClick={async () => {
    await removeFromCart({
         variables: { productId: p!.product.id as string },
               update(cache, el) {
                  const deletedId = el.data?.removeFromCart
                    console.log(deletedId)
                      const cartItems = cache.readQuery<MyCartQuery>({
                           query: MyCartDocument,
                          })
                    const filteredProds = cartItems?.myCart.products?.filter(
                      (p) => p?.product.id !== deletedId
                  )
                cache.writeQuery({
                    query: MyCartDocument,
                        data: {
                          myCart: {
                           ...cartItems,
                           products: filteredProds,
                         },
                     },
                   })
                 },
                })
             }}