Hi there,
I’m trying to build my own Shopify implementation using the Storefront API. I’m creating a cart, which returns the ID:
export async function addToCart(itemId: string, quantity: number) {
const createCartMutation = gql`
mutation createCart($cartInput: CartInput) {
cartCreate(input: $cartInput) {
cart {
id
checkoutUrl
}
}
}
`;
const variables = {
cartInput: {
lines: [
{
quantity,
merchandiseId: itemId,
},
],
},
};
try {
const card = await graphQLClient.request(createCartMutation, variables);
console.log({ addToCartCard: card });
return card;
} catch (error) {
console.error(error);
}
}
This works perfectly fine. The cart seems to be created an when i visit the checkoutUrl I see a valid cart in the Shopify checkout flow with the product I’ve added.
Although when I try to fetch that cart with the returned ID from this query, let’s say gid:/shopify/Cart/c1-9e5bb45d10420f754f15389f15af54c2 I get the error stating: Invalid global id
The fetch call looks like:
export async function getCart(cartId: string) {
const cartQuery = gql`
query getCart($cartId: ID!) {
cart(id: $cartId) {
${CartDetails}
}
}
`;
const variables = {
cartId,
};
try {
const data = (await graphQLClient.request(cartQuery, variables)) as any;
console.log({ getCart: data });
return data.cart;
} catch (error) {
console.error(error);
}
}
I have no clue how or why this happens. All the IDs seem to match, but there is not a single hint to what I misunderstanding..
