GraphQL & Apollo
Introduction
Natalia Tepluhina
Frontend developer (Angular & VueJS)
@N_Tepluhina
We are hiring!
https://scalac.io/join_us/
What is GraphQL?
@N_Tepluhina
GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.
- graphql.org -
GraphQL Features
@N_Tepluhina
-
Query your API to get exactly what you need
-
Access many resources on single request
-
Get predictable results with schema & type system
Companies using GraphQL
@N_Tepluhina
GraphQL vs. REST
@N_Tepluhina
...one more request
@N_Tepluhina
...and one more
@N_Tepluhina
GraphQL: all you need with one query
@N_Tepluhina
The Schema Definition Language
@N_Tepluhina
Basic Example
With a type relationship
type User {
name: String!;
age: Int!;
}
type Comment {
title: String!;
author: User!;
}
Scalar types
-
Int
-
Float
-
String
-
Boolean
-
Id
Fetching data with queries
@N_Tepluhina
Query with arguments
@N_Tepluhina
Writing data with mutations
@N_Tepluhina
Using Fragments
@N_Tepluhina
Realtime updates with Subscriptions
@N_Tepluhina
GraphQL Disadvantages
@N_Tepluhina
-
You need to learn how to set up GraphQL
-
You need to send the queries from the client => extra code in your client
-
You need to define the schema beforehand => extra work before you get results
-
You need to have a graphql endpoint on your server
-
Graphql queries are more bytes than simply going to a REST endpoint
-
The server needs to do more processing
Apollo Client
@N_Tepluhina
-
Incrementally adoptable
-
Universally compatible
-
Simple to get started with
-
Inspectable and understandable
-
Built for interactive apps
-
Small and flexible
-
Community driven
Apollo query example
@N_Tepluhina
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
link: new HttpLink({ uri: 'https://q80vw8qjp.lp.gql.zone/graphql' }),
cache: new InMemoryCache()
});
client.query({ query: gql`{ hello }` }).then(console.log);
Time for some practice!
@N_Tepluhina
Useful links
@N_Tepluhina
-
Official GraphQL Docs
-
Apollo Integration:
-
Github GraphQL API
GraphQL & Apollo
By Natalia Tepluhina
GraphQL & Apollo
- 1,339