DEV Community: Raj Vijay

An intro to Apollo GraphQL with React Hooks and Context API

Raj Vijay — Fri, 01 May 2020 15:40:34 +0000

Previously I wrote about how to use Angular with Apollo Graph QL here. I was watching a GraphQL video on egghead.io from Eve Porcello and I thought it would be fun to mimic the actions she performed on a GraphQL Playground (https://pet-library.moonhighway.com) using Angular and Apollo GraphQL Client.

Since I have been wanting to try out React for a while, I thought of rewriting the angular app in React using hooks and functional components and would like to share my learning experience with you.

Project

Our project will be a simple clone of pet library playground from scratch using React and Apollo Client,with features including authentication, returning a list of all pets and check-in/check-out pets. We will not use class-based components in this project since react hooks let us manage local component state and component life cycle.

You can view the complete source code here.

Folder Structure

Components folder will include the following components:

List.js : A simple presentational component that will render the list of pets and will take pets as props.

CheckIn.js: component to check in a pet and also to refresh the list.

CheckOut.js: component to check out a pet, both CheckIn and CheckOut component takes a pet Id as prop.

SelectStatus.js: component to filter out pets based on status.

Pages folder will include the following components:

ListContainer.js: A container component that will contain both the filter drop down and List component.

Let’s use create-react-app to create our project.

create-react-app react-apollo-graphql-hooks

We will also be using react bootstrap in our project, so let’s add it to our project by typing:

npm install react-bootstrap bootstrap

Then we will create SelectStatus.js in components folder and add the following code.

export const SelectStatus = ({ petStatus, defaultValue, onSelect }) => {
  const setSelect = (e) => {
    e.preventDefault();
    let index = e.target.options.selectedIndex;
    let status = petStatus[index];
    if (onSelect) {
      onSelect(status);
    }
  };
return (
    <>
      <Form.Group controlId="status">
        <Col>
          <Form.Label>Pet Status:</Form.Label>
        </Col>
        <Col>
          <Form.Control
            as="select"
            defaultValue={defaultValue?.name}
            onChange={(e) => setSelect(e)}
          >
            {petStatus.map((item) => {
              return <option key={item.key}>{item.name}</option>;
            })}
          </Form.Control>
        </Col>
      </Form.Group>
    </>
  );
};

Ignore the props { petStatus, defaultValue, onSelect } for now, we will get back to those later. As you can see this component is just a presentational component that doesn’t hold any internal state and just renders the bootstrap “select” component, by looping through the pet status list.

Let’s move on to the List Component.

export const List = ({ pets }) => {
  return (
    <>
      <div className="row mt-4">
        <div className="col-sm-8">
          <table className="table table-striped">
            <thead>
              <tr>
                <td className="w-25">
                  <p> Pet </p>
                </td>
                <td className="w-30">
                  <p> Category</p>
                </td>
                <td className="w-50">
                  <p> Customer</p>
                </td>
                <td className="w-50">
                  <p> Action</p>
                </td>
              </tr>
            </thead>
            <tbody>
              {pets.map((item) => {
                return (
                  <tr key={item.id}>
                    <td>{item.name}</td>
                    <td>{item.category}</td>
                    <td>{item.inCareOf?.name}</td>
                    <td>
                      {item.status === "AVAILABLE" ? (
                        <CheckOut petId={item.id} />
                      ) : (
                        <CheckIn petId={item.id} />
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
      ;
    </>
  );
};

It’s also just a presentational component that will render a list of pets. It also has a CheckIn/CheckOut component that takes in a pet id as a prop. Let’s get back to CheckIn/CheckOut components later.

Before creating the container components, let’s write our first Apollo Client hook. Create usePetsHooks.js in hooks folder with the following code.

import { useQuery } from "@apollo/client";
import gql from "graphql-tag";
const petFieldsQuery = gql`
  fragment petFields on Pet {
    id
    name
    category
    status
    inCareOf {
      name
    }
  }
`;
export const filterPetsQuery = gql`
  query petsQuery($status: PetStatus) {
    allPets(status: $status) {
      ...petFields
    }
  }
  ${petFieldsQuery}
`;
export default (status) => {
  return useQuery(filterPetsQuery, {
    fetchPolicy: "network-only",
    variables: {
      status: status,
    },
  });
};

We are using Apollo Client’s useQuery hook to fetch GraphQL data. A call to useQuery returns an object with properties including loading, error, data and a refetch function. We will look into how to use the refetch function when we get to CheckIn/CheckOut functionality. I am also keeping fetchPolicy as “network-only”, since we are not interested in caching query results in this project.

We also need to make sure that the List refreshes, when we do a CheckIn/CheckOut, so the current pet disappears from the list. Remember useQuery returns a refetch function ? And we want to call this refetch function from the CheckIn component, when we checks in a pet. How do we do that without making the List component a pass through component for refetch ?

One way is to use Context API, so we don’t have to manually pass props through the List component to CheckIn/CheckOut components. So using the API we can create a new context.

Create a file, refetchProvider.js with the following code.

import React from "react";
export const PetsContext = React.createContext({});
export const PetsProvider = PetsContext.Provider;

Provider can contain any values, and it can be a function (action) too. We will set the refetch function as a provider value in the next section.

Next lets’ create the container component ListContainer.js.

export const ListContainer = () => {
const petStatus = [
    { key: 1, id: null, name: "All" },
    { key: 2, id: "AVAILABLE", name: "Available" },
    { key: 3, id: "CHECKEDOUT", name: "Checked Out" },
  ];
const [selectedStatus, setSelectedStatus] = useState(() => null);
const { loading, error, data, refetch } = usePetsQuery(
    selectedStatus ? selectedStatus.id : null
  );
const onSelectStatus = (status) => {
    setSelectedStatus(status);
  };
const onRefetch = () => {
    refetch();
  };
if (loading) return "Loading...";
if (error) return `Error! ${error.message}`;
return (
    <>
      <Container className="mt-4">
        <Form>
          <Form.Row>
            <SelectStatus
              petStatus={petStatus}
              onSelect={onSelectStatus}
              defaultValue={selectedStatus}
            />
            <div className="ml-auto">
              <Logout />
            </div>
          </Form.Row>
        </Form>
        <PetsProvider value={() => onRefetch()}>
          <List pets={data.allPets} />
        </PetsProvider>
      </Container>
    </>
  );
};

We are using the Container pattern, so that we can separate the state and events from the presentational components.

const [selectedStatus, setSelectedStatus] = useState(() => null);

Here we are using React.useState to maintain the state of select drop down. useState returns an array and we can use ES6 destructuring syntax to access the values. When we change the select filter, we need to re render the entire list component and the updater function (setSelectedStatus) will take care of that.

Also notice how we have wrapped the List component into a PetsProvider. This helps us to use the context in each component. We will see that shortly in CheckIn component.

For check in functionality, lets’ create a CheckIn component.

export const CheckIn = ({ petId }) => {
const refetch = useContext(PetsContext);
const doCheckIn = useCheckInMutation();
  const checkIn = () => {
    doCheckIn(
      {
        variables: { petId: petId },
      },
      { refetchQueries: [`petsQuery`] }
    )
      .then((_) => {
        refetch();
      })
      .catch((e) => console.log(e));
  };
if (!isLoggedIn()) {
    return null;
  }
return (
    <>
      <button onClick={() => checkIn()} className="btn btn-link">
        Check In
      </button>
    </>
  );
};

We get a reference to the refetch handler from the useContext API. After the check in mutation happens, we will call the refetch() function, which will in turn invoke the onRefetch handler in ListContainer.js.

Conclusion

This was my attempt to share what I learned using React hooks and Context API. This sample project shows how to maintain local state using useState and how to pass the context to inner components, as long as they are somewhere in the same component tree. You can find more information on hooks here.

You can view the complete source code here.

My original article is here.

An intro to GraphQL with Apollo Client and Angular

Raj Vijay — Thu, 19 Dec 2019 15:36:05 +0000

Recently I watched an egghead.io tutorial from Eve Porcello, demonstrating how to communicate with a GraphQL API using the GraphQL query language. The instructor uses a tool called GraphQL Playground(https://pet-library.moonhighway.com), which lets the user, send queries to GraphQL endpoints and allows the user to perform various tasks on a pet library like authentication, return a list of pets, check-in and check-out pets from the pet library e.t.c.

In this blog post,we will build a simple clone of pet library playground from scratch using Angular and Apollo, with features including authentication, returning a list of all pets and check-in/check-out pets.

You can view the full source code here.

Let's start by adding Apollo Angular by using this command.

ng add apollo-angular

The above command will add an NgModule(graphql.module.ts) with an initial setup to the project. To this we need to add the URL of our GraphQL server, which in our case is http://pet-library.moonhighway.com

Let's start with returning a list of all pets from the library. List screen should have a filter to see All, Available and Checked Out status. Our final UI should look like this.

Let's add a new file pet.ts under models folder. You should be able to view the data types under the Schema tab in http://pet-library.moonhighway.com.

enum PetCategory {
    CAT,
    DOG,
    RABBIT,
    STINGRAY
}

export enum PetStatus {
    AVAILABLE,
    CHECKEDOUT
}

export interface Pet {
    id: string;
    name: string;
    weight: number;
    category: PetCategory;
    status: PetStatus;
    dueDate?: Date;
}

Query

We will create a file called pets-filter-query.ts under the queries folder and wrap the query with a gql function, like shown below. I am using a fragment called petFields in case if i need to reuse the fields in some other query. You can learn more about fragments here.

import gql from 'graphql-tag';
const petFieldsQuery = gql`
  fragment petFields on Pet {
    id
    name
    category
    status
    inCareOf{
      name
    }
  }`;

export const filterPetsQuery = gql`
query petsQuery($status : PetStatus)
{
  allPets(status : $status)  {
      ...petFields
  }
} ${petFieldsQuery}`;
```



## UI Layer

Let's then add a list component and update the html with the following.



```
<div class="row pt-4">
    <div class="col-sm-8">
        <span style="color: #007bff;font-weight :bold;">Pet Status: </span>
        <div ngbDropdown class="d-inline-block">
            <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>{{getStatusName()}}</button>
            <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button ngbDropdownItem *ngFor="let item of petStatus" (click)="changePetStatus(item)">
                    {{item.name}}</button>
            </div>
        </div>
        <div>
            <button class="btn btn-link float-sm-right" (click)=logOut()>Log Out</button>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-8">
        <table class="table table-striped">
            <thead>
                <tr>
                    <td class="w-25">
                        <p> Pet </p>
                    </td>
                    <td class="w-30">
                        <p> Category</p>
                    </td>
                    <td class="w-50">
                        <p> Customer</p>
                    </td>
                    <td class="w-50">
                        <p> Action</p>
                    </td>
                </tr>
            </thead>
            <tr *ngFor="let pet of pets$ | async |  select: 'allPets' ">
                <td>
                    {{pet.name}}
                </td>
                <td>
                    {{pet.category}}
                </td>
                <td>
                    {{pet.inCareOf?.name}}
                </td>
                <td>
                    <button (click)="checkInOut(pet)" *ngIf="loggedIn"
                        class="btn btn-link">{{pet.status == 'AVAILABLE' ? 'Check Out' : 'Check In' }}</button>
                </td>
            </tr>
        </table>
    </div>
</div>
```




## Service Layer

Next, add a pet.service.ts under services folder and update the code as shown below.



```javascript
  getPetsByStatus(petStatus: string) {
    return this.apollo
      .watchQuery({
        query: filterPetsQuery,
        fetchPolicy: 'network-only',
        variables: {
          status: petStatus,
        },
      })
      .valueChanges;
  }
```


I am adding 'network-only'as fetch-policy since for this call, I don't want the results from the cache and will always request data from the server. Apollo watchQuery returns an Observable to which we will subscribe in list.component.ts.

## Login
To perform Check In/Check Out we need to login first, as we have to send in a user token with every request. So let's work on our login component. In the command prompt enter

`ng g c login`

Then edit login.component.html to add this following markup.


```
<h2>Login</h2>
<form #loginForm="ngForm" (ngSubmit)="loginForm.form.valid && onSubmit()">
    <p style="color: red;font-weight: 600;">{{errorMessage}}</p>
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" name="username" [(ngModel)]="model.username" #username="ngModel" class="form-control"
            [ngClass]="{ 'is-invalid': loginForm.submitted && username.invalid }" required />
        <div *ngIf="loginForm.submitted && username.invalid" class="invalid-feedback">
            <div *ngIf="username.errors.required">User Name is required</div>
        </div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" name="password" [(ngModel)]="model.password" #password="ngModel" class="form-control"
            [ngClass]="{ 'is-invalid': loginForm.submitted && password.invalid }" required />
        <div *ngIf="loginForm.submitted && password.invalid" class="invalid-feedback">
            <div *ngIf="password.errors.required">Password is required</div>
        </div>
    </div>
    <div class="form-group">
        <button [disabled]="loading" class="btn btn-primary">Login</button>
        <a routerLink="/register" class="btn btn-link">Register</a>
    </div>
</form>
```



Add a login mutation under queries folder as shown below. We will create a class called LoginQL which extends from a Mutation class from apollo-angular.



```javascript
import { Injectable } from '@angular/core';
import { Mutation } from 'apollo-angular';
import gql from 'graphql-tag';

@Injectable({
    providedIn: 'root'
})
export class LoginQL extends Mutation {
    document = gql`
    mutation($username:ID!,$password:String!) {
        logIn(username:$username, password:$password){
          customer{
            name
          }
          token
        }
      }
`;
}

```


Let's add the login method to account service and store the token for future requests.



```javascript
  login(uname: string, pass: string) {
    return this.loginQL.mutate({
      username: uname,
      password: pass
    }
    ).pipe(tap(success =>
      this.token = (success as any).data.logIn.token
    ));
  }
```


Now we should be able to call this method from the login component and on successful login, navigate the user to the list screen.




```javascript
  onSubmit() {
    this.errorMessage = null;
    this.accountService.login(this.model.username, this.model.password).subscribe(c => {
      this.router.navigateByUrl('/list');
    }, e => this.errorMessage = e.message);
  }
```



For this demo purpose I have added a user name "jsmith" and password "pass" using the playground. You should be able to use this credentials to login.

## CheckIn/CheckOut
Since now we have the user token, we should  be able to Check In/Check Out pets from the library. Let's add a check in mutation under queries folder.



```javascript
import { Injectable } from '@angular/core';
import { Mutation } from 'apollo-angular';
import gql from 'graphql-tag';

@Injectable({
    providedIn: 'root'
})
export class CheckInQL extends Mutation {
    document = gql`
    mutation CheckIn($petId:ID!) {
        checkIn(id:$petId){
            pet {
                id
                name
                status
            }
            checkOutDate
            checkInDate
            late
        }
      }
`;
}

```



and also update our pet service method.


```javascript
  checkIn(pId: string) {
    this.checkInQL.mutate({
      petId: pId
    },
      { refetchQueries: [`petsQuery`] }
    ).subscribe();

  }
```



We can call this method from our List when the user clicks on the Check In link.



```javascript
  checkInOut(pet: any) {
    if (pet.status === 'AVAILABLE') {
      this.petService.checkOut(pet.id);
    } else {
      this.petService.checkIn(pet.id);
    }
  }
```



Since we need to modify every Check In request with the user token, we will add a middleware like shown below. We also need to pass AccountService to the middleware, since the user token is stored there.



```javascript
const middleware = (acctService: AccountService) => new ApolloLink((operation, forward) => {
  if (acctService && acctService.token) {
    operation.setContext({
      headers: new HttpHeaders().set('Authorization', `Bearer ${acctService.token}`)
    });
  };
  return forward(operation);
});

export function createApollo(httpLink: HttpLink, acctService: AccountService) {
  return {
    link: middleware(acctService).concat(httpLink.create({ uri })),
    cache: new InMemoryCache(),
  };
}
```



Don't forget to add account service to dependencies in module declaration.



```javascript
@NgModule({
  exports: [ApolloModule, HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink, AccountService],
    },
  ],
})
```



You can view the full source code [here](https://github.com/rajvirtual/angular-graphql-apollo).

State management with Angular 8 and Akita

Raj Vijay — Tue, 10 Sep 2019 14:19:21 +0000

Back in 2017 I wrote an article, building a simple blog application using NgRx here. Recently I have been experimenting with Akita, a state management pattern which I found to be much simpler and with less boilerplate code. So I decided to rewrite my sample app using Akita and would like to share the code with you.

Backend Server Setup

Let's use json-server to simulate our backend server. json-server helps us to setup a local development server for CRUD operations. Let's start with installing json-server.

npm install -g json-server

We will also create a JSON file with name db.json and add some sample entries for blogs and authors as show below.

{
  "blogs": [
    {
      "title": "Blog Title 1",
      "author": "John",
      "id": 1
    },
    {
      "title": "Blog Title 2",
      "author": "Harry",
      "id": 2
    }
  ],
  "authors": [
    {
   "id":1,
      "name": "All"
    },
    {
   "id":2,
      "name": "John"
    },
    {
   "id":3,
      "name": "Harry"
    },
    {
   "id":4,
      "name": "Jane"
    }
  ]
}

Let’s start the JSON server by running the command

json-server --watch db.json

This will setup a localhost server on your computer at port 3000. You should be able to navigate to http://localhost:3000/authors and see all the authors.

Blogs

First we need to return a list of blogs from the server. Let's add a new file blog.ts under models folder.

import { ID } from '@datorama/akita';

export interface Blog {
    id: ID;
    title: string;
    author: string;
}

Blog Store

Next, we create a blog store, this is where the blog state is going to be stored. In our sample application, we will have to hold an array of blogs and use a filter function to filter the blogs based on selected author. These are some of the states that we will be holding in our stores. Store can be viewed similar to a table in a database.

import { EntityState, EntityStore, StoreConfig } from '@datorama/akita';
import { Blog } from '../models/blog';
import { Injectable } from '@angular/core';

export interface BlogState extends EntityState<Blog> { }

@Injectable({
    providedIn: 'root'
})
@StoreConfig({ name: 'blogs' })
export class BlogStore extends EntityStore<BlogState, Blog> {

}

We will also need a filter store to save filter status, with initial value set to 'All'.

export interface FilterState extends EntityState<string> {
    authorFilter: {
        filter: string;
    };
}

const initialState = {
    authorFilter: {
        filter: 'All'
    }
};

@Injectable({
    providedIn: 'root'
})
@StoreConfig({ name: 'filter' })
export class FilterStore extends EntityStore<FilterState, string> {
    constructor() {
        super(initialState);
    }
}

Blog Query

We need a mechanism to query entities from the store. Akita docs recommends components should not get the data from the store directly but instead, use a Query. Let's create a query file and name it blog-query.ts.

import { QueryEntity } from '@datorama/akita';
import { Injectable } from '@angular/core';
import { BlogState, BlogStore } from '../stores/blog-store';
import { Blog } from '../models/blog';
@Injectable({
    providedIn: 'root'
})
export class BlogQuery extends QueryEntity<BlogState, Blog> {
    constructor(protected store: BlogStore) {
        super(store);
    }
}

Filter Query

Let's also create a filter query, add a file filter-query.ts. The getValue() method returns the raw value of the store, in our case the filter value.

export class FilterQuery extends QueryEntity<FilterState, string> {
    constructor(protected store: FilterStore) {
        super(store);
    }

    getFilter() {
        return this.getValue().authorFilter.filter;
    }

}

Blog Service

Akita recommends all asynchronous calls should be encapsulated in a service. So let's create a blog service and inject blog store into the service.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { tap } from 'rxjs/operators';
import { Blog } from '../models/blog';
import { BlogStore } from '../stores/blog-store';

@Injectable({ providedIn: 'root' })
export class BlogService {

  filter = 'All';
  constructor(private http: HttpClient, private blogStore: BlogStore) {
  }

  private createBlog({ id, title, author }: Partial<Blog>) {
    return {
      id,
      title, author
    };
  }


  get() {
    return this.http.get<Blog[]>('http://localhost:3000/blogs').pipe(tap(blogs => {
      this.blogStore.set(blogs);
    }));
  }


  add({ title, author }: Partial<Blog>) {
    const blog = this.createBlog({ id: Math.random(), title, author });
    this.blogStore.add(blog);
  }

  delete(id) {
    this.blogStore.remove(id);
  }

}

Let's also create an author service to get a list of authors.

export class AuthorService {

  constructor(private authorStore: AuthorStore,
              private http: HttpClient) {
  }

  get() {
    return this.http.get<Author[]>('http://localhost:3000/authors').pipe(tap(entities => {
      this.authorStore.set(entities);
    }));
  }

}

UI Layer

We need to design the UI layer to show the initial list of blogs. To design our UI layer, we will split our UI into smart components also known as container components and presentation components (sometimes known as dumb components). We will start building the home screen of our application, which has the author filter section and blog section. Blog section is further split into blog listing section and an add blog section. This is the final screen output.

author-section

<div>
    <span>
        Select User:
        <select class="form-control" (change)="onSelectAuthor($event.target.value)">
            <option *ngFor="let author of authors$ | async">{{author.name}}</option>
        </select>
    </span>
</div>

blog-section

<app-blog-list (deleteBlogEvent)="deleteBlog($event)" [blogs]="blogs$ | async"></app-blog-list>
<app-add-blog [filter]="filter" (addBlogEvent)="addBlog($event)"></app-add-blog>

blog-list

<div class="row">
    <div class="col-sm-6">
        <table class="table-striped">
            <thead>
                <tr>
                    <td>
                        <p> Title </p>
                    </td>
                    <td>
                        <p> Author</p>
                    </td>
                    <td></td>
                    <td align="right">
                        <p>Action</p>
                    </td>
                </tr>
            </thead>

            <tr *ngFor="let blog of blogs">
                <td class="col-sm-1">
                    {{blog.title}}
                </td>
                <td>
                    {{blog.author}}
                </td>
                <td class="col-sm-1">
                </td>
                <td align="right" class="col-sm-1">
                    <button class="btn-link" (click)="deleteBlog(blog)">Delete</button>
                </td>
            </tr>
        </table>
    </div>
</div>

The presentation components receive the data from smart components via @Input and the smart components receive any actions from the presentation components via @Output. In our case, blog-section is the main component and blog-list is our presentation component. author-section is the component that holds the author filter drop down.

First, we will load the authors to fill in the filter dropdown by calling the author service.

export class AuthorSectionComponent implements OnInit {

  @Output()
  updateFilter = new EventEmitter();
  authors$: Observable<Author[]>;
  constructor(private authorService: AuthorService, private filterService: FilterService, private authorQuery: AuthorQuery) { }

  ngOnInit() {
    this.authorService.get().subscribe();
    this.authors$ = this.authorQuery.selectAll();
  }

  onSelectAuthor(author: string) {
    this.updateFilter.emit(author);
    this.filterService.updateFilter(author === 'All' ? 'All' : author);
  }
}

this.authorService.get().subscribe();

This call above will set up author store with authors data. You will notice we are getting the authors$ data as an observable by calling store's selectAll() method. You can learn more about Akita's store query APIs here.
To load all the blogs we could have used the blog query and call just the selectAll() function.

this.blogs$ = this.blogQuery.selectAll();

But in our scenario, our application state changes whenever we update the filter, or when we add a new blog. RxJS has an operator called combinelatest() to achieve this functionality. So this is our updated code in blog-section.

   this.blogs$ = combineLatest(
      this.blogQuery.selectAll(),
      this.filterQuery.select(state => state.authorFilter.filter),
      (blogs: any, authorFilter: any) => {
        return blogs ? blogs.filter(blog => authorFilter === 'All' ? blog :   blog.author === authorFilter) : [];
      }

Any time we add a new blog to the store, or update the filter condition we will receive the latest values and we just need to apply the latest filter condition to the new array of blogs that we receive the from the combineLatest() function.

Conclusion

As you can see Akita is much simpler than NgRx in terms of boilerplate and integration with Angular. I find it super easy to implement when compared to NgRx, just use a service to set the store data and use a query inside the components to retrieve the data as an observable.

You can find the complete code here.