Syncfusion React Pivot Table with Apollo GraphQL Server

This sample demonstrates how to connect the Syncfusion React Pivot Table to a GraphQL backend powered by Apollo Server. The client uses the Syncfusion GraphQLAdaptor to send GraphQL queries to the backend, receive paged result data, and bind it to a Pivot Table for aggregation and reporting.

---

📑 Table of Contents

• 🚀 Quick Overview
• ✨ Key Features
• 🛠️ Prerequisites
• 📂 Project Structure
• 🏗️ Architecture and Data Flow
• ⚙️ Backend – Apollo GraphQL Server
• 🎨 Frontend – React Pivot Table
• ▶️ Installation and Running
• 🔧 Troubleshooting
• 📖 Additional Resources

---

🚀 Quick Overview

This project contains two parts:

• a React client that renders the Syncfusion Pivot Table
• an Apollo GraphQL server that serves product data through GraphQL queries and mutations

The client uses the Syncfusion DataManager with the GraphQLAdaptor. The adaptor sends a GraphQL query to the Apollo server, receives a response shaped as { result, count }, and binds that data to the Pivot Table.

Component	Technology	Purpose
Frontend	React + TypeScript + Vite	Render the Pivot Table UI
Backend	Apollo Server + GraphQL	Expose the product data API
Data Binding	Syncfusion DataManager + GraphQLAdaptor	Send GraphQL requests and map the response
Data Source	In-memory array	Provide sample product records for the demo

---

✨ Key Features

• 📊 Remote data binding for the Syncfusion React Pivot Table
• 🔄 GraphQL-based data retrieval through the Syncfusion GraphQLAdaptor
• 🧩 Apollo server schema, queries, and resolvers in separate source files
• 🗂️ In-memory sample data with CRUD-style GraphQL mutations
• ✏️ Pivot Table editing support with add, update, and delete operations
• 🧠 Field-level mapping for rows, columns, values, and formatting

---

🛠️ Prerequisites

Make sure the following tools are available before running the sample:

• Node.js 18.x or later
• npm
• A modern browser for the React app and GraphQL Playground interface

The project uses the following runtime dependencies in the source code:

• Apollo Server 5
• GraphQL 16
• TypeScript 5
• Syncfusion React Pivot Table components
• Syncfusion DataManager and GraphQLAdaptor APIs

---

📂 Project Structure

syncfusion-react-pivot-with-apollo-server/
├── Client/                    # React + TypeScript frontend
│   ├── src/
│   │   └── App.tsx            # Pivot Table configuration and GraphQLAdaptor setup
│   ├── package.json
│   └── vite.config.ts
├── GraphQLServer/             # Apollo GraphQL backend
│   ├── src/
│   │   ├── data.ts            # In-memory product dataset
│   │   ├── resolvers.ts       # Query and mutation resolvers
│   │   ├── schema.graphql     # GraphQL schema definitions
│   │   ├── server.ts          # Apollo server bootstrap
│   │   └── types.ts           # TypeScript interfaces for GraphQL args/types
│   └── package.json
├── README.md
└── graphql-apollo-server.md  # User Guide reference for the Apollo GraphQL setup

---

🏗️ Architecture and Data Flow

The sample follows a simple but expressive architecture:

1. The React client creates a Syncfusion DataManager.
2. The DataManager is configured with a GraphQLAdaptor.
3. The adaptor issues a GraphQL query to the Apollo server at http://localhost:4000/.
4. The Apollo server resolves the query using the schema and resolver functions.
5. The response is returned in the format expected by the Pivot Table: result and count.
6. The Pivot Table binds the returned records and renders aggregated summaries based on the configured rows, columns, and values.

The key data flow is:

React Pivot Table -> GraphQLAdaptor -> Apollo GraphQL query -> Resolver -> In-memory data -> GraphQL response -> Pivot Table

---

⚙️ Backend – Apollo GraphQL Server

The GraphQL backend lives in the GraphQLServer folder and uses Apollo Server with an executable GraphQL schema.

1. Sample data source

The sample data is stored in GraphQLServer/src/data.ts. It contains a collection of product records with fields such as:

• ProductID
• ProductName
• Category
• MRP
• Discount

The data is intentionally in-memory, so changes made through GraphQL mutations are available only for the current server process.

2. GraphQL schema

The schema is defined in GraphQLServer/src/schema.graphql. It exposes:

• a Product type
• a ReturnType type with result and count
• a DataManagerInput input type for request parameters
• a ProductInput input type for mutations
• query and mutation operations for retrieving and modifying product data

Example schema excerpt:

type Product {
  ProductID: String!
  ProductName: String
  Category: String
  MRP: Float
  Discount: Float
}

type ReturnType {
  result: [Product!]!
  count: Int!
}

type Query {
  getProducts(datamanager: DataManagerInput): ReturnType!
}

3. Query and mutation resolvers

The resolver implementation is in GraphQLServer/src/resolvers.ts.

The server implements:

• getProducts to return all products plus the total record count
• createProduct to append a new product to the in-memory array
• updateProduct to update an existing product by key
• deleteProduct to remove a product by key

The resolver logic is intentionally simple and demonstrates the contract expected by the Syncfusion GraphQLAdaptor.

export const resolvers = {
  Query: {
    getProducts: () => {
      const result = [...productDetails];
      const count = result.length;
      return { result, count };
    },
  },
  Mutation: {
    createProduct: (_parent, { value }) => {
      productDetails.push(value);
      return value;
    },
  },
};

4. Apollo server startup

The server bootstrap is defined in GraphQLServer/src/server.ts. It:

• loads the schema from the GraphQL SDL file
• creates an executable schema using makeExecutableSchema
• starts an Apollo standalone server
• listens on port 4000 by default or the PORT environment variable

const { url } = await startStandaloneServer(server, {
  listen: { port },
});

console.log(`GraphQL ready at ${url}`);

---

🎨 Frontend – React Pivot Table

The client is implemented in Client/src/App.tsx.

1. DataManager and GraphQLAdaptor setup

The React app creates a DataManager and configures it with the Syncfusion GraphQLAdaptor.

const data = new DataManager({
  url: 'http://localhost:4000/',
  adaptor: new GraphQLAdaptor({
    response: {
      result: 'getProducts.result',
      count: 'getProducts.count'
    },
    query: `
      query getProducts($datamanager: DataManagerInput) {
        getProducts(datamanager: $datamanager) {
          count
          result {
            ProductID
            ProductName
            Category
            MRP
            Discount
          }
        }
      }
    `,
  }),
  crossDomain: true,
});

2. How the adaptor maps GraphQL responses

The GraphQLAdaptor expects the GraphQL response to include the data in a shape that is compatible with the Syncfusion DataManager.

In this sample, the response mapping is configured as:

• result: 'getProducts.result'
• count: 'getProducts.count'

This tells the adaptor to read the result array and the overall record count from the GraphQL payload returned by the getProducts query.

3. Pivot Table configuration

The sample configures the Pivot Table with:

• rows: ProductID
• columns: ProductName
• values: MRP
• formatting: currency formatting for MRP

Editing is also enabled with add, update, and delete support.

const dataSourceSettings: DataSourceSettingsModel = {
  dataSource: data,
  expandAll: false,
  rows: [{ name: 'ProductID' }],
  columns: [{ name: 'ProductName' }],
  values: [{ name: 'MRP' }],
  formatSettings: [{ name: 'MRP', format: 'C0' }],
};

4. CRUD support through the Pivot Grid

The sample wires the beginDrillThrough event to make the ProductID field the primary key for editing. This allows the DataManager to issue the correct GraphQL mutations for insert, update, and delete operations.

The client uses mutation templates for:

• createProduct
• updateProduct
• deleteProduct

These mutations are defined in the GraphQLAdaptor configuration in Client/src/App.tsx.

---

▶️ Installation and Running

1. Clone the repository

git clone <your-repository-url>
cd syncfusion-react-pivot-with-apollo-server

2. Install backend dependencies

cd GraphQLServer
npm install

3. Install frontend dependencies

cd ../Client
npm install

4. Start the Apollo GraphQL server

From the GraphQLServer folder:

npm run start

The server starts at:

http://localhost:4000/

You can open this URL in a browser to access the GraphQL endpoint and test queries.

5. Start the React application

From the Client folder:

npm run dev

The Vite development server starts the React app, usually at:

http://localhost:5173/

6. Verify the sample

Open the app in the browser and confirm that the Pivot Table loads with the sample product data.

A sample GraphQL query you can test in the browser or via a GraphQL client is:

query GetProducts {
  getProducts {
    count
    result {
      ProductID
      ProductName
      Category
      MRP
      Discount
    }
  }
}

---

🔧 Troubleshooting

Issue	Possible cause	Resolution
The Pivot Table remains empty	The GraphQL server is not reachable or the response shape is different	Confirm that the Apollo server is running on port 4000 and that the GraphQLAdaptor response mapping matches the server output
GraphQL server fails to start	Missing dependencies or TypeScript runtime issues	Run npm install in the GraphQLServer folder and verify the TypeScript setup
Frontend cannot load data	The client points to the wrong endpoint	Ensure the client uses http://localhost:4000/ in the DataManager configuration
Editing operations do not work	The backend mutation names or field names do not match	Check the GraphQL schema and mutation names in the client configuration
Data changes are not persistent	The sample uses an in-memory array	Restarting the server resets the sample data

---

📜 License & Support

📄 License

This project is released under the MIT License. You are free to use, modify, and distribute the code in personal and commercial projects. See the LICENSE file for full text.

🛟 Support

• 📘 Documentation: Syncfusion® React Pivot Table Docs
• 💬 Community forum: Syncfusion® Community
• 🐛 Bug reports & feature requests: GitHub Issues
• 📧 Direct support: Syncfusion® Support Portal (for licensed users)
• 📖 Web API Adaptor Guide: WebApiAdaptor Documentation

⭐ If this project helped you, please consider giving it a star on GitHub — it helps others discover it!

---

📚 Related Resources

• 📘 PivotTable Data Binding
• 📘 DataManager Getting Started
• 📘 GraphQLAdaptor
• 📘 PivotTable Editing
• 📘 PivotTable Drill-Through

---

_{Built with ❤️ using React and .NET by the Syncfusion® team.}