Server-Side Operations With GraphQL
Learn how to perform server-side operations using GraphQL with a complete reference implementation that uses the MySQL database.
In this guide we will develop an Olympic Medals application that demonstrates how to integrate a GraphQL endpoint with ag-Grid's Server-Side Row Model. Specifically it will show how data can be lazy-loaded as required, even when performing group, filter, sort operations when working with large datasets.
The following screenshot shows what the finished application looks like:
The source code can be found here: https://github.com/ag-grid/ag-grid-server-side-graphql-example.
In recent years GraphQL has become a popular alternative to REST when fetching data for clients. Familiarity with GraphQL is assumed, however this Introduction to GraphQL should provide all the necessary background information to follow this guide.
One of the main benefits of GraphQL is the ability to expose a single endpoint and schema which maps to numerous data sources. However in our Olympic Medals application we will keep things simple by using just a single MySQL datasource.
We will now proceed to install and run the application before going through the implementation details.
Download and Install
Clone the example project using:
Navigate into the project directory:
Install project dependencies and build project using:
Download and install the database as per the MySQL Download documentation.
Create a database with the name
'sample_data'. Then run the following script to create the table
olympic_winners and populate it with data via the MySQL command line:
That's it! We are now ready to run and explore the application.
Running the application
To run the application execute the following from the command line:
Then point your browser to http://localhost:4000/
Defining the GraphQL schema
To keep things simple, our schema will just contain a single entity
rows query is also defined along with its supported input types and enums:
The input types defined in the schema directly map to the IServerSideGetRowsRequest. We will discuss these mappings in detail in the following sections.
rows resolver function is implemented as follows:
OlympicService simply takes the query arguments and uses dynamic SQL techniques to construct
the corresponding SQL queries. The implementation details will be omitted from this guide but can be examined
in the project repository.
The GraphQL schema is created using the
makeExecutableSchema helper function from the
graphql-tools package, by combining the schema
typeDefs along with the corresponding
resolvers package as follows:
Hosting our GraphQL endpoint is done with the help of the
express-graphql npm package. It is supplied
with the schema we defined above.
Notice that we have supplied the option:
graphiql: true to enable the GraphiQL client, which is a
useful tool for testing queries during development, and is available at:
In order to fetch data for the Server-Side Row Model we must implement the
which contains a single method
getRows(params) which accepts request params from the grid.
To retrieve data from our GraphQL endpoint we will use the
Apollo client. The response is then passed back to the grid
params.successCallback(rows, lastRow) as shown below:
IServerSideGetRowsRequest supplied in the
params is simply mapped to our GraphQL
queries input params as shown below:
Note that we are using the Apollo graphql-tag package to help create the GraphQL AST.
ServerSideDatasource is then registered with the grid via the grid API as follows:
In this guide we presented a reference implementation for integrating the Server-Side Row Model with GraphQL server hosted in Node and connected to a MySQL database. This included all necessary configuration and install instructions.
A high level overview was given to illustrate the problem this approach solves before providing details of how to achieve the following server-side operations:
- Infinite Scrolling