React + GraphQL Custom Card > Add editing components

[Pietro-Poli-]

Hi!
I'm working on a react + graphQl Custom Card.
I've 3 different object related A -> B and B -> C
Into the view I attached I can list all B objects related do A and all C objects related to each B object.

Now I need to edit some fields, in B objects and C objects.
I would like to use a component like one with green arrow.
Is it possible?

[KhushbooRevOps]

Hi @Pietro-Poli-,

Yes, you can add editing components in a React + GraphQL custom card. Here’s how you can achieve this,

1. You can use controlled form components (like input, select, etc.) in React to enable editing. Each component can hold the values of the B or C objects you want to edit.

2. When a field is edited, trigger a mutation via your GraphQL API to update the relevant fields in the B or C objects.

3. To improve user experience, you can implement optimistic updates so the UI reflects changes immediately, even before the mutation completes.

In summary, use React form components for editing and GraphQL mutations to update the data on the backend.

I hope it helps, let me know if you need to talk!

Khushboo Pokhriyal

Growth & Operations

GroRapid Labs

LinkedIn | 9315044754 | Email | Website

[Pietro-Poli- · Accepted solution]

Hi Khushoboo,
today I've found these source:
https://developers.hubspot.com/docs/platform/ui-components/crm-data-components
https://developers.hubspot.com/docs/platform/ui-components/crm-action-components

I've tested them and et voilà  it works like I want.

😃