getServerSideProps中的值在Nextjs服务器重新启动之前不会更新

lf5gs5x2  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(129)

我以为getServerSideProps会在页面重新加载时更新数据。但在这种情况下,它不会。
在我的情况下,如果管理员进入这个页面,它会显示一个按钮来编辑产品。

const productDetail: NextPage<Props> = ({ product }) => {
  //if admin enter this page
   <AdminCreateOrEditPrice product={product}/>

  //if user enter this page
  //display product's data
}

export const getServerSideProps: GetServerSideProps = async ({ query }) => {
  const { data, error, loading } = await client.query<GetProductQuery>({
    query: GetProductDocument,
    variables: { productId: query.productId },
  });
  return {
    props: {
      product: data.getProduct.product,
    },
  };
};

字符串
EditProductData组件具有编辑产品数据的变化。

const AdminCreateOrEditPrice= ({product}) =>{
 const [adminCreateOrEditPrice] = useAdminCreateOrEditPrice();

 const res = await adminCreateOrEditPrice({
        variables: {
          ...
        },
      });
      if (res.data?)
        alert(JSON.stringify(res.data));
   }
 return(
   <>
    //...
   </>
)
}


数据库中的数据被更新,我可以通过alert()看到它,但在客户端却看不到,尽管我重新加载页面,直到我重新启动Nextjs服务器,然后它才更新。在我的情况下,什么是错误,它如何修复它?
编辑:我使用codegen生成钩子

@Mutation((_return) => PriceResponse)
  @UseMiddleware(checkAdmin)
  async adminCreateOrEditPrice(
    @Arg("priceInput") priceInput: PriceInput,
    @Arg("priceId") priceId: number,
    @Arg("productId") productId: number
  ): Promise<PriceResponse> {
    return await dataSource.transaction(async (transactionEntityManager) => {
      const productExisting = await transactionEntityManager.findOne(Product, {
        where: {
          id: productId,
        },
      });
      if (!productExisting)
        return {
          code: 400,
          success: false,
          message: "Product not found",
        };
      const priceExisting = await transactionEntityManager.findOne(Price, {
        where: {
          id: priceId,
        },
      });
      if (priceExisting) {
        if (productExisting.priceToDisplay === priceExisting.price) {
          productExisting.priceToDisplay = priceInput.price;
          await transactionEntityManager.save(productExisting);
        }

        (priceExisting.type = priceInput.type),
          (priceExisting.status = priceInput.status),
          (priceExisting.price = priceInput.price);
        await transactionEntityManager.save(priceExisting);

        return {
          code: 200,
          success: true,
          message: "Edit price successfully!",
          price: priceExisting,
        };
      } else {
        const newPrice = Price.create({
          type: priceInput.type,
          status: priceInput.status,
          price: priceInput.price,
          product: productExisting,
        });
        await transactionEntityManager.save(newPrice);
        return {
          code: 200,
          success: true,
          message: "Create new price successfully!",
          price: newPrice,
        };
      }
    });
  }


这是生成代码生成器的模式。

mutation AdminCreateOrEditPrice($priceInput:PriceInput!,$priceId:Float!,$productId:Float!){
    adminCreateOrEditPrice(priceInput:$priceInput,priceId:$priceId,productId:$productId){
        code
        success
        message
        price{
            id
            type
            status
            price
        }
    }
}


它工作得很好,我可以从服务器返回值。

8fq7wneg

8fq7wneg1#

我刚刚找到了解决问题的方法,我把这段代码放在了ApolloClient的InMemoryCache中

getProduct: {
            keyArgs: false,
            merge(existing, incoming) {
              console.log(incoming)
              return incoming.product;
            },
          },

字符串
我以为只是getStaticProps需要这个代码,但我错了。如果你和我一样面临这个问题,让我试试我的方法。

相关问题