Getting a cart from cart_cookie and passing it to client components.

Question

Hello everyone 🙂I am using medusa-js to develop a store, and I am trying to write my custom logic for creating cart. I have a file actions.cart.ts with a "use server" directive at the top. I created a couple of functions for sending api requests to my backend to create or get a cart depending on if it exists. I create a _medusa_cart_id cookie which stores the cart_id succesfuly.export async function createCart() { try { const res = await fetch(`${MEDUSA_BACKEND_URL}/store/carts`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, next: { tags: ['cart'] }, cache: 'no-store' }); console.log('Cart creation response', res); const data = await res.json(); if (res.status === 200) { const cart = data.cart; const cookieStore = cookies(); cookieStore.set('_medusa_cart_id', cart.id, { maxAge: 60 * 60 * 24 * 7, httpOnly: true, sameSite: 'strict', secure: process.env.NODE_ENV === 'production' }); console.log('Cart created', cart); revalidateTag('cart'); return cart as Cart; } else { throw new Error('Failed to create cart'); } } catch (error) { console.log(`Error creating cart: ${error}`); } } When I add products they are succesfuly added in the backend. However, I can't for the love of god figure out how to get the cart object and pass it to further components, specifically my

and . Header is a server component, and the cart popover is a client component.

Masai Lion · Answer

I created a getCart function to get the cart:export async function getCart() {
  const cartId = cookies().get('_medusa_cart_id')?.value;

console.log('Cart ID from the cookie', cartId);

if (!cartId) {
    console.log('No cart ID found');
    return null;
  }

const response = await fetch(`${MEDUSA_BACKEND_URL}/store/carts/${cartId}`, {
    method: 'GET',
    next: {
      tags: ['cart']
    },
    cache: 'no-store'
  });
  const data = await response.json();

if (response.status === 200) {
    const cart = data.cart;
    return cart as Cart;
  } else {
    console.log('Failed to get cart');
    return null;
  }
}And I made this little helper to getOrSet the cart if it doesn't exist:export async function getOrSetCart2() {
  const cartId = cookies().get('_medusa_cart_id')?.value;

let cart;

if (cartId) {
    console.log('Getting cart from cookie', cartId);
    cart = await getCart().then((res) => res);
  }

if (!cart) {
    console.log('Creating new cart');
    cart = await createCart();
    if (cart) {
      // revalidateTag('cart');
    }
  }
  return cart as Cart;
}

Getting a cart from cart_cookie and passing it to client components.

2 Replies