DEV Community

Cover image for Building a React CRUD App on Salesforce with GraphQL
Exploring Agentforce
Exploring Agentforce

Posted on

Building a React CRUD App on Salesforce with GraphQL

#graphql #webdev #javascript #react

How much plumbing does a React CRUD App on Salesforce actually need?

I started with a prebuilt SFDX project containing a React app, generated with the Salesforce CLI. It comes with the React boilerplate and required dependencies already set up (check here how to quickly generate SFDX project with React uiBundle data). I then connected the project to a Salesforce sandbox.

The goal was simple: build a small React UI that could read and update real Salesforce Cases.

Basically, to build the integration, you just need:

1. Generate the GraphQL schema

First, generate the Salesforce GraphQL schema:

npm run graphql:schema
Enter fullscreen mode Exit fullscreen mode

The schema is essentially describes the objects you can access and the queries you can make in the org.

2. Define the GraphQL operations

Using the schema, define the GraphQL operations the UI needs.

For my Cases app:

  • Queries: Get Cases, Get Case details
  • Mutation: Update a Case

3. Generate TypeScript types

Next, use GraphQL Code Generator to generate TypeScript types from the Salesforce schema and the operations:

npm run graphql:codegen
Enter fullscreen mode Exit fullscreen mode

This gives the React app type-safe definitions for query results, variables, and mutations without manually defining the data shapes.

4. Setup GraphQL client

To execute the queries and mutations, use the Data SDK (@salesforce/platform-sdk).

It includes a GraphQL client and handles authentication and CSRF token management.

5. Build the UI

From there, the AI coding tool handled most of the React implementation:

Cases → Case details → Edit → Save

And that's where things got interesting.

The interesting part isn’t just GraphQL or React individually. It’s how well the pieces fit together:

  • React is extremely good at building the UI.
  • GraphQL is extremely good at fetching the data you need, including related data — you can fetch an account, its related cases, contacts, and more in a single query.
  • AI coding agents are extremely good at generating the React boilerplate, GraphQL queries, and wiring the pieces together.

And Salesforce already provides the backend: the data model, relationships, authentication, permissions, validation, and APIs.

You can spend less time building the integration — and more time concentrating on UI/UX and deciding what data you want to show and how you want to show it.

Resources:
Fetch data with Data SDK

Top comments (0)