If you’re an online service or a product, knowledge about your user base is one of the first and most important mechanisms to maintain customer retention by designing modules in accordance with customer preferences. Essentially, it will help your service generate hits and eventually boost the market value of your product or service.

GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data. It provides a complete and understandable description of the data in your API and gives clients the power to ask for exactly what they need and nothing more. GraphQL makes it easier to evolve APIs over time and enables powerful developer tools.

In this blog post, we’ll look at how we can use the power of GraphQL to seamlessly create an end-to-end user information base with Sencha Ext JS.

How can I quickly set up a GraphQL HTTP server?

If you do not currently have an Apollo Server for GraphQL running on NodeJS you can follow this tutorial to set one up. It mainly involves installing the dependencies like this:

npm install apollo-server graphql

To set up the server-side responders for your GraphQL interface, you just need to define the schema that interacts with the endpoint logic. You can design the User schema as follows.

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
  type User {
    firstName: String
    lastName: String
    username: String
    email: String
}
  type Query {
    users: [User]
  }
`;

Once you have defined the user schema, you now need to configure the relevant resolvers; user resolver in our case. Resolvers are used to define the technique for fetching the types defined in the schema.

const resolvers = {        Query: {              users: () => users,        },  };

Now, we need to start the server so that it can be used by our Sencha Ext JS client (that we will create in the next section).

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

How can I create a GraphQL schema in Ext JS for the user information base?

We now have our server up and running. Next up is the GraphQL schema definition in Sencha Ext JS. Define your schema and query as follows.

type Query {         getUsers(         limit: Int         offset: Int         orderBy: String         filter: String         ): Users         user(id: Int!): User }

type User {       username: String       firstName: String       lastName: String       email: String }

type Users {      count: Int      users: [User]! }

What is an easy way to integrate GraphQL HTTP server with Sencha Ext JS client?

Before initializing the Sencha application and writing a script to interact with the server using GraphQL patterns, the following dependencies must be installed.

npm install --save @apollo/client npm install --save graphql

Once you have installed the required dependencies, import them into the application to use them as follows.

require('graphql'); GraphQLApp.xApolloClient = require('@apollo/client/core');

While launching the Sencha application, you need to create a singleton instance of Apollo Client to manage API calls and requests to the server using GraphQL patterns.

Ext.define('GraphQLApp.GraphQL', {  alternateClassName: ['GraphQL'],  singleton: true,  client: null,  initClient(baseUrl) {      this.client = new GraphQLApp.xApolloClient.ApolloClient({          cache: new GraphQLApp.xApolloClient.InMemoryCache({}),          uri: baseUrl,          defaultOptions: {              query: {                  fetchPolicy: 'network-only',                  errorPolicy: 'all',              },              mutate: {                  errorPolicy: 'all',              },          },      });  }, });

Finally, send the API request to retrieve data from the server.

GraphQL.client .query({  query: GraphQLApp.xApolloClient.gql`          query GetUsers {              getUsers {                  count                  users {                      id                      username                  }              }          }      ` }) .then(result => console.log(result));

As you can see, creating a user information base with Sencha Ext JS and GraphQL is pretty easy and quick. GraphQL schema and ExtJS data model work together very well and are highly recommended to create both easy and complicated flows for a seamless user experience.

For further details, check out the full guide here.

Ready to get started with Sencha Ext JS? Head over to Sencha Ext JS and create your own user registration flows now.