Description
I have a mutation to Add to cart like this:
import { gql } from '@apollo/client';
const ADD_TO_CART = gql`
mutation ($input: AddToCartInput!) {
addToCart(input: $input) {
cartItem {
key
product {
id
... some other field here
}
variation {
id
variationId
name
... some other field here
}
quantity
total
subtotal
subtotalTax
}
}
}
`;
export default ADD_TO_CART;
This is Get Cart query:
const GET_CART = gql`
query GetCart {
cart {
contents {
nodes {
key
product {
id
productId
name
description
.. some other field here
}
variation {
id
variationId
name
description
.. some other field here
}
quantity
total
subtotal
subtotalTax
}
}
subtotal
subtotalTax
.. some other field here
}
}
`;
export default GET_CART;
Then I call this mutation like this:
// here define the addToCartInput!
const addToCartInput = {
clientMutationId: v4(),
productId: productId,
quantity: 1,
variationId: product.variationId
}
// Call to GET_CART query above
const { loading, error, data, refetch } = useQuery(GET_CART, {
notifyOnNetworkStatusChange: true,
onCompleted: () => {
console.log(data) // <-- this always return the blank cart
}
});
// Call to ADD_TO_CART mutation above
const [addToCart,
{ loading: addToCartLoading, error: addToCartError, data: addToCartData }]
= useMutation(ADD_TO_CART, {
variables: {
input: addToCartInput,
},
onCompleted: () => {
console.log("completed add to cart")
refetch(); // Refetch the query again for Updated cart by calling the GET_CART query above again
},
onError: (error) => {
// present the error
console.log(error)
}
});
As you can see above, I refetch() the GET_CART query when the onCompleted() of the addToCart mutation.
What I expect:
Therefore what I expect should be, initial it will be a blank cart(subtotal 0.00) , then when successful mutation, it will have the product inside it.
End Result:
But end up, everytime the GET_CART query will return the blank cart even the addToCart mutation is successful.
But weird thing is, when I using GraphiQL in wp-admin dashboard, it works as expected in What I expect section . If I having the successful mutation in GraphiQL, I get the data in cart using the GET_CART query.
So what I missing out? Cause I can't find any documentation on this. Cause when I checked the docs about the cart, I found this, https://woographql.com/guides/create-react-app/3-creating-the-cart which I didnt see any documentation.
Any help will be appreciated.