Developing applications faster is a top priority for every company. In this talk, Pierre will explain how Strapi provides an easy way to create API on the fly and query your data through a generated GraphQL schema. Pierre will also do a live demo of how to easily integrate graphQL with any front-end frameworks to accelerate content and features delivery.

1. Jan 30, 2020
GraphQL SF
🚀
Delivering faster with
GraphQL and Strapi

2. Hey!
{
"data": {
"talk": {
"topic": "Delivering faster with GraphQL and Strapi”
"speaker": {
{
"first_name": "Pierre",
"last_name": "Burgy",
"twitter_account": "pierre_burgy",
"role": "Co-founder & CEO",
"company": {
"name": "Strapi",
"description": "Open-source, 100% JavaScript, completely customizable, Headless CMS.",
"url": "https://strapi.io",
"github_url": "https://github.com/strapi/strapi"
}
}
}
}
}
}

3. Hey!

4. Delivering
a website
Ideas & Content DevelopmentDesign Interactions
Company
Deployed
User
PAYLOADFRONT-END DEV.GraphQL
BACK-END DEV.Strapi

5. Delivering
a website
Ideas & Content DevelopmentDesign Interactions
Company
Deployed
User
FRONT-END DEV.GraphQL
BACK-END DEV.Strapi
PAYLOAD

6. 1s
In page load time yields to
-7%
Conversions
-11%
Page views
-16%
Customer Satisfaction
Source: Crazyegg

7. Reducing the payload
score
author
created_utc
title
num_comments

8. REST

9. Heavy
📟
DATABASE REQUESTS
🏋‍♀
PAYLOAD

10. GraphQL request

11. GraphQL
{
subreddit: subreddit(where: {name: "graphql"}) {
name
links {
id
title
created_at
author {
id
username
}
comments {
id
content
aggregate {
count
}
likes {
aggregate {
sum {
dir
}
}
}
}
}
}
}
{
"data": {
"subreddit": {
"name": "graphql",
"links": [
{
"id": "5e31e7af5647c72707179f25",
"title": "first link",
"created_at": "2020-01-29T20:14:39.011Z",
"author": {
"id": "5e31e79e5647c72707179f23",
"username": "tom"
},
"links_aggregate": {
"sum": {
"dir": 2
}
}
"comments": [
{
"id": "5e31e7bd5647c72707179f26",
"content": "First *comment*"
}
]
"comments_aggregate": {
aggregate {
"count": 1
}
}
}
]
}
}
}

12. Delivering
a website
Ideas & Content DevelopmentDesign Interactions
Company
Deployed
User
GraphQL
BACK-END DEV.Strapi
PAYLOADFRONT-END DEV.

13. Payload size vs. number of requests
Less requests
Bigger payload

14. Payload size vs. number of requests

15. Development phase
Front-end requests

16. Payload size vs. number of requests
Lighter payload
More requests

17. GraphQL at the rescue
One request.
Everything you need.
No more. No less.

18. Delivering
a website
Ideas & Content DevelopmentDesign Interactions
Company
Deployed
User
GraphQL
Strapi
PAYLOADFRONT-END DEV.
BACK-END DEV.

19. Visual
Schema Editor
Strapi advantages
GraphQL out of the box
(filters, aggregations, etc.)

20. 👩‍🎨
Aggregations
Custom resolvers
Customization

21. Working with
unpredictable content

22. THANK YOU!

23. Retweet and try to
🎉 win a ticket for the GraphQL Summit 🎉
bit.ly/graphql-strapi
@graphqlsummit will take place on October 27-28 in SF 📣
Sign up now for Super Earlybird tickets!
https://www.eventbrite.com/e/graphql-summit-2020-tickets-80264277615

24. Questions?

25. Retweet and reply what you would like to learn there
@graphqlsummit will take place on October 27-28 in SF 📣
🎉 Win a ticket for the GraphQL Summit 🎉
bit.ly/graphql-strapi
@graphqlsummit will take place on October 27-28 in SF 📣
Sign up now for Super Earlybird tickets!
https://www.eventbrite.com/e/graphql-summit-2020-tickets-80264277615