Ionic @ In3

presents

Graphql with ionic

overview

GraphQL is both a query language (like SQL) and a runtime. In other words, it's a language that can be used to retrieve and modify data and also the operations which accept and process those data fetches and modifications. 

What is it?

overview

Here are just a few of the benefits of using Graphql.

why should you use it?

  • no need to define multiple API endpoints
  • dynamic data structures for responses
  • easier to extend compared to a standard REST API

overview

graphql vs rest api

Fetching three data models:

  • users
  • projects
  • tasks

(diagram courtesy of toptal.com)

integration

In Ionic, you'll use the Apollo Client to talk to the server. You must also define the queries and/or mutations you want to send to the server.

(diagram courtesy of toptal.com)

Client-side

integration

server-side

Here's a sample GraphQL server hosted on launchpad.graphql.com. Launchpad is an online code editor that allows you to spin-up and share GraphQL servers. It's comparable to codesandbox.io.

 

https://launchpad.graphql.com/new

sample project

This repo contains a task app programmed with Ionic 4. It has the Apollo Client implemented and points to a sample GraphQL server hosted on launchpad.

helpful resources

;

schema

GraphQL is both a query language and a runtime environment. The runtime environment is used to process GraphQL queries