https://github.com/janit/graphql-nextjs-wordpress

GraphQL and Next.js for WordPress Developers
https://github.com/janit/graphql-nextjs-wordpress

Last synced: about 1 year ago
JSON representation

GraphQL and Next.js for WordPress Developers

• Host: GitHub
• URL: https://github.com/janit/graphql-nextjs-wordpress
• Owner: janit
• Created: 2018-04-04T13:42:22.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-04T15:38:13.000Z (about 8 years ago)
• Last Synced: 2025-04-26T04:25:33.223Z (about 1 year ago)
• Language: JavaScript
• Size: 3.53 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# GraphQL and Next.js for WordPress devs

WordPress Helsinki Meetup
March 4th 2018 - Jani Tarvainen

---

## About me, Jani Tarvainen



Personal branding


@velmu


 - Web development for 20y+

 - Interested in all things
tech and around it

 - Currently working mostly
with content thingamajigs

 - Working knowledge of
TS/JS and Symfony/PHP

 - Day job at eZ Systems,
 night job at Malloc

---

## GraphQL and Next.js

- GraphQL — kudos FB + Community

  - Transfer protocol + Query Language

  - An alternative to REST, but more defined

  - Independent of backend technology

- Next.js — kudos Zeit + Community

  - A Universal JavaScript framework

  - Runs in the browser and server (with Node.js)

  - Templating using React.js

- GraphQL + Next.js

  - A nice combo for decoupled app/site building

  - We'll see how it works soon enough

--

## GraphQL and PHP

- GraphQL reference implementation in JavaScript

- Two mature GraphQL libraries for PHP

  - WebOnyx GraphQL library

  - Youshido GraphQL library

- Both solid and feature complete in my experience

- Please don't write your own GraphQL library!

--

## GraphQL and WordPress

- WordPress does not ship with GraphQL support

- WPGraphQL plugin adds GraphQL support

  - Uses the WebOnyx library, stable foundations

  - Good coverage from what I explored

  - eZ to use — even a WP noob could do it

  - Open for custom API extensions

  - More: https://wpgraphql.com

- There are others, but this worked great for me

---

## WordPress and Next.js

- Two independent technologies

- Completely decoupled:

  - Next.js the presentation framework

  - WordPress the data source

- GraphQL is the common ground

- A solid foundation for PWAs

--

## Example app walkthrough

- Features

  - List posts on front page

  - Open individual post

- Walkthrough

  - WPGraphQL API

  - Next.js core API

  - Index view

  - Post view

- View the sauce:

  - https://github.com/janit/graphql-nextjs-wordpress/tree/master/app

---

# Hot or not

--

## Hot

- No compromise SEO

- A fresh approach, learn new things

- GraphQL syntax is legi… ble

- Not tied to any system

--

## Not hot

- Lose all the WP sitebuilding bonuses

- WPGraphQL plugin compatibility?

- Added complexity… for what?

- It's fair to say GraphQL is overengineered

---

## Closing links

 - GraphQL widely deployed at GitHub…

 - Next.js used by Docker, Magic Leap

 - Next.js Alternatives:

  - After.js for React users

  - Nuxt.js for Vue.js users

 - GraphQL platforms:

  - GraphCool Framework

  - Prisma

  -  PostGraphile

 - Sites and Apps with GraphQL and Next.js

---

# Thank you

- Questions?