Graphql – modern query language for API

Actually, in my opinion there is nothing best. Anything has its own advantages and disadvantages. It depends on the context we apply the proper technology, design patterns, best practices etc.

Some benefits we can consider about:

You could even say GraphQL is between SOAP and REST taking pieces from each.
GraphQL allows you to represent queries in a cleaner way.
GraphQL can reduce this by enabling the server to aggregate the data for the client in a single query.
Main benefit of GraphQL is to enable clients to query for just the data they need.

Let’s see what we can do with graphQL between Angular and Rails server.

How angular and rails server work together

1. Client side

Code generator: https://github.com/dotansimha/graphql-code-generator

overwrite: true
schema: "http://localhost:3000/graphql?token=yourtokenhere"
documents: "**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript-common"
      - "typescript-client"
      - "typescript-apollo-angular"

Schema url is super important, in order to make sure about the correctness between Angular (or Reactjs or any other client framework) and rails server. If there is something wrong at schema in server, it would raise issue when we run command for generating graphql.ts file. “documents” to point out the queries we define at client to request specific fields based on requirement. This generator would do somethings to make the combination. If we find any issue while generating but it just shows “Something went wrong” without other extra information, let’s go to server for investigation.

Sample gen script.

"gen": "gql-gen --config codegen.yml"

Regarding to how we make queries, if you are using angular framework so that https://www.apollographql.com/docs/angular/ is a good choice. Have a look on Query.d.ts of apollo-angular package.

import { DocumentNode } from 'graphql';
import { ApolloQueryResult } from 'apollo-client';
import { Observable } from 'rxjs';
import { Apollo } from './Apollo';
import { QueryRef } from './QueryRef';
import { WatchQueryOptions, QueryOptions, R } from './types';
export declare class Query<T = {}, V = R> {
    protected apollo: Apollo;
    readonly document: DocumentNode;
    client: string;
    constructor(apollo: Apollo);
    watch(variables?: V, options?: WatchQueryOptions<V>): QueryRef<T, V>;
    fetch(variables?: V, options?: QueryOptions<V>): Observable<ApolloQueryResult<T>>;

We have watch and fetch for fetching data from server.

This is the graphql.ts has, after combined “.graphql” file (queries, mutations).

export class GuruDetailsQueryGQL extends Apollo.Query<
  GuruDetailsQuery.Query,
  GuruDetailsQuery.Variables
> {
  document: any = gql`
    query GuruDetailsQuery($id: String!) {
      guru(id: $id) {
        id

We inject this query in constructor.

private guruDetailGQL: GuruDetailsQueryGQL

this.guruDetailGQL.fetch({id: this.id}).toPromise()
      .then(({data, errors}) => {
        const guru = data.guru;

For example,

we copy the query from the spec at server side.
pasting query into the graphql in javascript framework.
run generator

Now, we have new class in graphql.ts for being used.

2. Server side

If you are using rails server, https://github.com/rmosolgo/graphql-ruby is a good choice. Let’s follow the guides in here https://graphql-ruby.org/guides.

That’s it. The documents out there. I just show you what we need to study.