Storefront Cart Query issue having to fetch the cart twice

[Kraghøjgaard]

I'm currently doing a Nuxt 3 project with Apollo, and having some issues with the cart query.

When creating a cart using the cartCreate mutation I get back a id, when then trying to use cart query I have to run it twice before it returns anything on each page.
If I'm on a product page, and fetched the cart query twice, it only needs to be done once afterwards. But if I go to my frontpage and back to the product page, it has to be fetched twice again, what am I missing here?

Here's my code

const cartStore = useCartStore();
const cartIdCookie = useCookie('cartId');

onMounted(async () => {
  try {
    if (cartIdCookie.value) {
      const { result, error } = useQuery(getCart, { cartId: cartIdCookie.value });

      if (error.value) {
        console.error('Error executing getCart query:', error.value);
        return;
      }
      
      if (result.value && result.value.cart) {
        cartStore.subtotalAmount = result.value.cart.cost.subtotalAmount;
        cartStore.checkoutUrl = result.value.cart.checkoutUrl;
      } else {
        console.error('Failed to get cart', error.value);
      }
    } else {
      const { mutate } = useMutation(createCart);
      const response = await mutate();
  
      if (response && response.data.cartCreate.cart) {
        cartIdCookie.value = response.data.cartCreate.cart.id;
        const { result, error } = useQuery(getCart, { cartId: cartIdCookie.value });

        if (error.value) {
          console.error('Error executing getCart query after cart creation:', error.value);
          return;
        }

        if (result.value && result.value.cart) {
          cartStore.subtotalAmount = result.value.cart.cost.subtotalAmount;
          cartStore.checkoutUrl = result.value.cart.checkoutUrl;
        } else {
          console.error('Failed to get cart after creation');
        }
      } else {
        console.error('Failed to create cart');
      }
    }
  } catch (error) {
    console.error('Error fetching or creating cart:', error);
  }
})

export const getCart = gql`
  query getCart ($cartId: ID!) {
    cart (id: $cartId) {
      id
      createdAt
      updatedAt
      checkoutUrl
      lines(first: 10) {
        edges {
          node {
            id
            quantity
            merchandise {
              ... on ProductVariant {
                id
              }
            }
            attributes {
              key
              value
            }
          }
        }
      }
      cost {
        subtotalAmount {
          amount
          currencyCode
        }
      }
    }
  }
`

I know that the cart works, and that the id is indeed valid. I'm able to add products to it straight away, and running the cartLinesAdd mutation or any other mutation for that matter It'll return data without any issues on the first try.

Done multiple tests, and simply can't seem to figure this one out, honestly seems like a issue with the actual query by shopify?

Logs by first fetch:

gid://shopify/Cart/Z2NwLWV1cm9wZS13ZXN0MzowMUhTVFgzQjBRM1AwS0I0U0pGMjZCNk1NSw
ShoppingCart.vue:25 cartIdCookie: gid://shopify/Cart/Z2NwLWV1cm9wZS13ZXN0MzowMUhTVFgzQjBRM1AwS0I0U0pGMjZCNk1NSw
ShoppingCart.vue:28 getCart: undefined
ShoppingCart.vue:40 Failed to get cart null

Logs by second fetch:

gid://shopify/Cart/Z2NwLWV1cm9wZS13ZXN0MzowMUhTVFgzQjBRM1AwS0I0U0pGMjZCNk1NSw
ShoppingCart.vue:25 cartIdCookie: gid://shopify/Cart/Z2NwLWV1cm9wZS13ZXN0MzowMUhTVFgzQjBRM1AwS0I0U0pGMjZCNk1NSw
ShoppingCart.vue:28 getCart: {
  "cart": {
    "__typename": "Cart",
    "id": "gid://shopify/Cart/Z2NwLWV1cm9wZS13ZXN0MzowMUhTVFgzQjBRM1AwS0I0U0pGMjZCNk1NSw",
    "createdAt": "2024-03-25T13:34:19Z",
    "updatedAt": "2024-03-25T13:59:24Z",
    "checkoutUrl": "https://kraghojgaard.myshopify.com/cart/c/Z2NwLWV1cm9wZS13ZXN0MzowMUhTVFgzQjBRM1AwS0I0U0pGMjZCNk1NSw?key=c95c6bacfd1c41542653edb746374e2b",
    "lines": {
      "__typename": "BaseCartLineConnection",
      "edges": [
        {
          "__typename": "BaseCartLineEdge",
          "node": {
            "__typename": "CartLine",
            "id": "gid://shopify/CartLine/e324eb41-ff99-4ae8-8074-bf3abefb3970?cart=Z2NwLWV1cm9wZS13ZXN0MzowMUhTVFgzQjBRM1AwS0I0U0pGMjZCNk1NSw",
            "quantity": 4,
            "merchandise": {
              "__typename": "ProductVariant",
              "id": "gid://shopify/ProductVariant/47804168929614"
            },
            "attributes": []
          }
        }
      ]
    },
    "cost": {
      "__typename": "CartCost",
      "subtotalAmount": {
        "__typename": "MoneyV2",
        "amount": "4800.0",
        "currencyCode": "DKK"
      }
    }
  }
}

If any further information is needed, do not hesitate to ask, thank you!