Easily Access GraphQL Resultsets In Your Javascript Apps

Succeeding in business online requires having the right information at the right time. If you have an online service or product to sell, you need to know your user base. Simply put, the correct knowledge and insights are the most important mechanisms you have to maintain customer retention. You can use them to design product modules your customers want. That, in turn, will help you generate hits that will boost your market value.

One of the ways you can generate the insights you need to stay competitive is by using GraphQL. GraphQL is an open-source data query and manipulation language for APIs, and a runtime that fulfills queries of your existing data. It provides a complete and understandable description of the data in your API and gives your clients the power they need to access the exact information they need without clutter or noise. GraphQL makes it easier to evolve your APIs over time using powerful developer tools and the best js frameworks.

In this blog post, we’ll look at how you 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 don’t already have an Apollo Server for GraphQL running on NodeJS you can follow this tutorial to set one up. The process 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 need to configure the relevant resolvers. In this case, we are using the user resolver. Resolvers define techniques for fetching the types defined in the schema.

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

Now, we need to start the server for use by the Sencha Ext JS client ( we will create that 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?

Now that your server is up and running, next up is creating 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, you need to install the following dependencies:

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

Once you have installed the dependencies you need, import them into the application as follows:

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

When you launch 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 quick and easy. The GraphQL schema and the ExtJS data model work very well together. That’s why they are a great way to create either simple or complicated flows that deliver 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.