value from getServerSideProps not updating until Nextjs server restart

value from getServerSideProps not updating until Nextjs server restart


1

I thought with getServerSideProps,data will updating whenever page is reload.But in this case , it doesn’t.

In my case, if admin enter this page, it will display a button to edit product.

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 component have a mutation to edit product data.

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

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

data was update in database, i can see it through alert(),but not at client although I reload page,until I restart Nextjs server,then it update.
What is error in my case and how can it fix it?

Edit:
I use codegen to generate hook

 @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,
        };
      }
    });
  }

And this is schema to codegen gerenated.

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

It work well, i can get value return from server.

8

  • If you reload the page, your data should be updated too. If you look for a client-side update, you need set states for product

    – Nick Vu

    Apr 16, 2022 at 9:01

  • @NickVu i tried, but it not work, I logged incoming props in cache memory , it still return previous value.

    – Loc Tran

    Apr 16, 2022 at 10:09

  • you can try to put console.log(data) after client.query in getServerSideProps to see which data you have in the response. If it shows previous data, it means you have problems with client.query, not with getServerSideProps

    – Nick Vu

    Apr 16, 2022 at 10:50

  • Oh it shows previous data, so can you help me about error type I am facing?

    – Loc Tran

    Apr 16, 2022 at 12:24

  • Could you share useAdminProductData hook code?

    – Nick Vu

    Apr 16, 2022 at 13:24

2 Answers
2


1

i just found the way to fix my problem, I put this code at InMemoryCache of ApolloClient

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

i thought just getStaticProps need this code, but i’m wrong.
If you facing the problem like me,let try my way.


0

I’m facing the issue as well, can you please tell me how you use this following code?

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



Leave a Reply

Your email address will not be published. Required fields are marked *