Client component fetch

[amaioru0]

Hi there,

I am wondering how I can use client.fetch on a client component?

When I try to use it I can't because it needs const customerId = await getSessionCustomerId(); but that requires next/headers which only work on server components.

[BC-krasnoshapka]

hi @amaioru0
Catalyst client utilizes customer impersonation token that by default can be used on the server only. If it's still needed to fetch data in client component I think you can try internal API routes (example). Please provide more info about your use case if API route doesn't work for you.

[matthewvolk]

Hi @amaioru0 👋

In addition to what @BC-krasnoshapka mentioned, server components introduce a couple other cool patterns that can be leveraged to pass or mutate data in client components. Lee Rob (VP Product, Vercel) posted a tweet showing how server and client components can be combined to get a similar experience as getServerSideProps. If you are looking to mutate data on the client, you can also pass server actions to client components - in this case, you would grab the customer ID from within the server action code, since that does run on the server.