best way to access data from client component

[simple kayak]

if im understanding this correctly, if im on the server i can use the local API
https://payloadcms.com/docs/getting-started/concepts#local-api
but if im on the client my hands are tied a bit (i mean for type saftey), my options are

1. use the rest api directly (i will lose all the type saftey, unless i make my own wrappers using tanstack query or use somethning like ts-rest, or zodios)
2. make a trpc server and use local-api and make my own wrappers again
3. use graphql with apollo to make it generate the hooks for me.
4. idk, is there is an sdk or something like that i remmber seeing an issue or a pull request on github if im not mistaken

so the question is what is the best way to access the data from client components, like if a user clicked the like button how can i make the mutation and invalidate the likes etc

[polar spear]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Swap in your own React components - Building Custom Components - Getting the Current Language
• Swap in your own React components - Building Custom Components - Getting the Current Locale
• React Hooks - useFormFields

Community-Help:

• Login Local API res object
• How to parse formData in custom endpoint?
• Best place for a studio to deploy a growing number of Payload projects?
• Retrieve current locale used in field hooks

[simple kayak]

TLDR
a way to access the cms from the client without making my own wrappers, with full type saftey

[craggy raft]

Not sure when it will be merged.
https://github.com/payloadcms/payload/pull/9463

[shell rain]

Anybody successful in integrating grapesjs to payloadcms? Instead of using lexical richtext.
I have been successful, with the caveat that I’m still trying to resolve is when I’m saving it’s showing different versions in different browsers, which means each time I save that is do an update(patch) it’s creating a new version which is correct but on opening it on another browser it will open previous version thus not showing the latest version changes, if anyone knows how I can resolve this can please contact me at [e-mail] or here, thank you

[simple kayak]

??

[open saffron]

@shell rain
Please make a new post with your question. It's not related to this post.

Hi, @simple kayak

Your backend and frontend are working on the different ports?

[simple kayak]

im just tinkering rn but no

the most optimal way to my knowldge is forcing trpc in the way

[open saffron]

Why not the use of rest api?

[simple kayak]

how do you get type saftey there?

i must make wrappers around each endpoint using react query

as@craggy raft said there is a pull request for an SDK to wrap the client side but no one sure is if it's going to be merged + it's more like a general approach than a "reacty way"
https://github.com/payloadcms/payload/pull/9463

[craggy raft]

I tried TRPC, ORPC before, in a monorepo, frontend is astro. Just adds too much complexity.

Just use the code from the above PR in a package, import the payload config (only the type, which is another workspace package) it is working.