Harnessing the Power of GraphQL in WordPress. WordCamp Kathmandu-2022

1. Harnessing the
Power of
GraphQL in
WordPress
Sandip Basnet
Freelance Software Developer

2. GraphQL
● By Facebook in 2012
● Replacement for REST
● Strongly Typed schema
● Declarative data fetching
● Query Language for APIs
● Single endpoint and responses to queries

3. Who’s using GraphQL?

4. Why GraphQL, but not REST?
Over fetching
Under fetching
Maintainability and Scalability
Client downloads more data than needed
Specific endpoint doesn’t provide enough data
Too many endpoints

5. Why GraphQL?
● Speed up feature development
● Solves Over-fetching and Under-fetching issues
● Efficient data loading (for increased mobile usage)
● Avoids the need to adjust REST APIs according to designs i.e rapidly
changing requirements on client side

6. REST vs GraphQL endpoints
/posts
/users/<user_id>
/categories/<category_id>

7. Schema
● Collection of graphql Types
● Contract between client and server
● Strong type system to define capabilities of an API
● FE and BE can work independently after deciding on the schema

8. Core concepts - Queries
Fetching data
GraphQL is about asking for specific
fields on objects.

9. Core concepts - Queries
Fetching data
GraphQL is about asking for specific
fields on objects.

10. Core concepts - Mutations
● Create
● Update
● Delete

11. Core concepts - Subscription
● Listen to data
● Push data from the server to the clients
that choose to listen to real time
messages from the server.
● Use Case - Notifying the client side
about particular events

12. WP GraphQL

13. Time for Demo!
Let’s see everything mentioned.

14. THANK YOU
@mondyfy

15. References
● https://www.wpgraphql.com/
● https://graphql.org/learn/best-practices/
● https://developer.wordpress.org/rest-api/reference/
● https://master--wpgraphql-docs.netlify.app/getting-started/posts/
● NextJs Demo: https://github.com/mondyfy/wpgql-next-demo
● https://www.slideshare.net/tienneBlanger2/headless-wordpress-with-graphql-and-
reactjs