This post illustrates how to perform CRUD operations using ag-Grid server-side row model and JSON-server, GraphQL, Apollo-client and React/TypeScript. We’ve built an example to demonstrate how to implement the necessary operations to have a fully-functional ag-Grid in this scenario. I hope this helps you effectively use ag-Grid with GraphQL and React!

Live sample

You can download the project from GitHub and easily reuse its code to implement this in your project. Please see a quick demo of the sample below showing the CRUD operations:

Architecture

Let’s go over the components/frameworks and their roles in this:

• JSON-server: Provides a full fake REST API that we’ll use to create, read, update and delete records
• GraphQL: Allows requesting the exact data we need from our server
• Apollo-client: Allows building queries directly from the front-end
• React/TypeScript: Used to bootstrap a single-page React application using create-react-app

Please see this illustrated in the diagram below:

#ag-grid #react #graphql