How to use GraphQL with Ext JS—A Tutorial
TL;DR GraphQL schema and ExtJS data model work together very well. Apollo Client provides a core library that can be included in ExtJS projects to easily manage GraphQL requests, adding powerful features such as in-memory caching. Here I explain a proxy implementation that fully wraps the GraphQL integration, generating requests from ExtJS models (with associations) and their values. The proxy, together with a working example, can be found here. What is GraphQL? GraphQL is a great tool for developers to control the data they need from an API: by introducing schemas, it provides a standard structure for your APIs. It requests you to define object types and fields, unlike the REST APIs that are based on a style convention. The GraphQL structured approach in remote communication allows you to use a lot of productivity tools both in server-side runtime and front-end applications. These include testing, auto-generated documentation, editing and multi-language SDKs. From the client side, the main difference with REST is the ability to send queries to the server, specifying exactly what you need rather than relying on an “unpredictable” route implementation. More about Ext JS ExtJS is a framework for Web and mobile Single Page Applications and it is quite popular for development of reach-data interfaces. It is also a first-class citizen in the front-end technologies in terms of “productivity” and ” schema” and this is the reason why GraphQL is a promising tool for ExtJS data management. At the time of writing, there is no built-in integration for GraphQL queries in the framework, but in this article we’ll see how to integrate GraphQL in an ExtJS application in order to enable remote communication with a GraphQL back-end and benefit from of all the GraphQL features. Note: an alternative approach can be found using ExtReact taking advantage of Apollo for React integration. Here is the tech talk repo. GraphQL client library When I first introducedGraphQL, I said that one of the advantages are the productivity tools. A production-ready JS library has to be there, and the solutions out there are certainly more than a client SDK. The two options are: I chose Apollo Client because it provides a core library that is framework agnostic rather than Relay which is focused on React use-case. In addition, Apollo is a very popular platform for development of both GraphQL clients and server APIs. GraphQL server Since the implementation of GraphQL server is not in the scope of this how-to article, I assume you have a working back-end, or you can start a new Apollo Server project from the official tutorial. This is the example schema used for this article. type Query { getUsers( limit: Int offset: Int orderBy: String filter: String ): Users user(id: Int!): User } type Mutation { createUser(createUserInput: CreateUserInput!): Int updateUser( id: Int! updateUserInput: UpdateUserInput! ): Int deleteUser(id: Int!): Int } type User { id: Int! username: String! firstName: String lastName: String role: String! email: String! areas: [Area!] } type Area { id: Int! name: String! } type Users { count: Int! users: [User!]! } input CreateUserInput { username: String! firstName: String! lastName: String! role: String! email: String! areas: [Int!]! } input UpdateUserInput { username: String firstName: String lastName: String role: String email: String areas: [Int!] password: String } ExtJS application setup The test case analysed here is based […]
