An Introduction to GrahpQL and how WPGraphQL can be used.

1. Using WordPress as a
Headless CMS with
WPGraphQL
Tampere WordPress Meetup, 14.11.2019
Ari-Pekka Koponen, Vincit, ari-pekka.koponen@vincit.fi

2. Who am I?
Ari-Pekka Koponen, by everybody calls me A-P.
The easiest way for me to get into flow is by coding. I’ve
worked 3½ years with WordPress full-time and a total of 7½
years as a full-stack developer.
I work as Tech Director at Vincit, where I help our customers
in selecting the best possible technologies for their business
needs and create wonderful digital services.

3. vincit.fi

4. 2007Founded
450+Employees
43,5 M€
Turnover 2018
4,1 M€
EBIT 2018
Tampere – Helsinki – Turku – Oulu, FInland
Palo Alto – Orange County – Santa Monica, USA
Best place to work in Europe 2016
Best place to work in Finland 2014, 2015, 2016
(Great place to work)
Specialist of service and
business design,
software development
and continuous services
Award-winning
workplace
with 100% satisfaction guarantee.
Vincit in a Nutshell
If you love web-development and would like work interesting projects, please go to https://www.vincit.fi/en/careers/ and send an application. Do it now! 🔥

5. IKAALISTENMATKATOIMISTO.FI
300 000+
VISITORS PER MONTH
220%
INCREASE IN
CLUB LOYALTY
28%
INCREASE IN
AVERAGE PURCHASE
Designed and developed brand new web store
and customized ERP for Finnish travel agency
including dynamic pricing and integrated
marketing solutions.
Furthermore created and implemented concepts
for e.g. recommendation rewards and loyalty
program.
Customer story

6. ORAL.FI
Design and development of Oral
Hammaslääkärit website, OmaOral customer
service portal and web booking. In addition
development of internally used solutions for
better efficiency and customer service.
Customer story

7. Bullshit Bingo Time!

8. Bullshit Bingo Time!
1. Go to https://bit.ly/wp-bingo
2. Concoct a nickname and a team name for yourself
3. Use the Game name Bullshit-bingo
4. Click “Join!”
5. You now have your own, hand-made bullshit bingo card!
6. Listen to this talk and mark the bullshit words you hear.
7. When you get a bingo,
a. Stand up and
b. shout “THIS IS BULLSHIT!” and
c. you will receive a handsome 20€ (!!!) cash price!

9. Bullshit Bingo Time!
1. Go to https://bit.ly/wp-bingo
2. Concoct a nickname and a team name for yourself
3. Use the Game name Bullshit-bingo
4. Click “Join!”
5. You now have your own, hand-made bullshit bingo card!
6. Listen to this talk and mark the bullshit words you hear.
7. When you get a bingo,
a. Stand up and
b. shout “THIS IS BULLSHIT!” and
c. you will receive a handsome 20€ (!!!) cash price
40-50€ (!!!!!!) worth of movie tickets!

10. What is a Headless
CMS?

11. Traditional CMS architecture
The frontend and backend are
rendered on the server (in
WordPress).
The backend is coupled together
with the frontend.
WordPress
Frontend / UI Backend

12. Browser
Headless CMS architecture
The frontend and backend
separated with an API.
The frontend runs as a JavaScript
application on the user’s browser.
WordPress
JavaScript
App
Backend
HTTP
API
Mobile
Mobile App

13. Popular Headless CMS options
Popular options
- WordPress REST API (Open Source)
- Contentful (SaaS)
- Prismic (SaaS)
- Drupal? (Open Source)
Maybe soon popular
- WordPress WPGraphQL (Open Source)

14. What is GraphQL?

15. What is GraphQL?
GraphQL is a query language for your API.
It is not tied to any specific database or storage engine
and can be used with any programming language or
database.
GraphQL APIs have a strongly typed Schema. The
GraphQL Schema is composed of Types, and Types are
composed of Fields.
{
bingoGames(where: {title: "Fruitbingo"}) {
edges {
node {
id
title
words
players {
title
team {
title
}
}
}
}
}
}
This is what it looks like!

16. What is a Graph?
NodeNodeNode Node
Node Node
Node Node Node
Look, a third Edge here!An Edge A second Edge
OMG,
Edges everywhere!

17. What is a graph?
Graphs consist of nodes and edges.
A node is an individual resource. For example, a Post, Page, Bingo Game or User.
Edges are the connections between nodes.

18. A Bingo Graph
PlayerPlayerPlayer Player
Bingo Game Bingo Game
Team Team Team

19. Our Bingo Graph
MichaelPamAngela Dwight
Fruitbingo
Star Wars
bingo
Team Gosu Team 1337 Team OP

20. Why use GraphQL instead of REST?
A single endpoint for all queries.
A single way for documenting your API, that allows introspection. This allows tools like GraphiQL to
suggest you fields and relationships.
A standardized way for returning linked objects (relationships) in a single request.
The frontend developer can query just the fields they need. This makes payloads smaller and allows
the API developer to see what data is actually used.

21. Any questions?

22. How to use GraphQL
with WordPress?

23. How to use GraphQL with WordPress?
WPGraphQL (https://www.wpgraphql.com/) is a free plugin that exposes WordPress data through a
GraphQL API.
Built using the GraphQL-PHP library.
It provides an executable, extendable Schema and resolvers for a WordPress site.

24. DIY Bingo time!

25. Let’s Build a Bingo App using WPGraphQL
We’ll build a Bingo app using WordPress and React.
We could use any frontend framework, a static site generator like Gatsby or Nuxt, or even build a
mobile app).
I’ll use React today, because I’m familiar with it.

26. [DEMO]

27. Any questions?

28. Challenges in using
GraphQL with WordPress

29. Challenges in using GraphQL with WordPress
WPGraphQL is quite fresh (started in 2017) and has had a few very bad security issues. The newer
versions have addressed these issues and the codebase has been audited, but still a concern.
WordPress does not have a native and performant solution for post relationships, which makes
building performant Graph APIs hard.

30. Thank you!