topic Re: React + GraphQL Custom Card > Add editing components in APIs & Integrations

React + GraphQL Custom Card > Add editing components

Pietro-Poli- — Tue, 17 Sep 2024 13:55:33 GMT

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?

Re: React + GraphQL Custom Card > Add editing components

KhushbooP11 — Wed, 18 Sep 2024 12:06:38 GMT

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

Re: React + GraphQL Custom Card > Add editing components

Pietro-Poli- — Wed, 18 Sep 2024 19:19:41 GMT

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.

😃