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
2 Answers
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.
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
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.
Apr 16, 2022 at 10:09
you can try to put
console.log(data)
afterclient.query
ingetServerSideProps
to see which data you have in the response. If it shows previous data, it means you have problems withclient.query
, not withgetServerSideProps
Apr 16, 2022 at 10:50
Oh it shows previous data, so can you help me about error type I am facing?
Apr 16, 2022 at 12:24
Could you share
useAdminProductData
hook code?Apr 16, 2022 at 13:24