{"id":19697155,"url":"https://github.com/janit/graphql-nextjs-wordpress","last_synced_at":"2025-04-29T11:32:27.626Z","repository":{"id":69358429,"uuid":"128067811","full_name":"janit/graphql-nextjs-wordpress","owner":"janit","description":"GraphQL and Next.js for WordPress Developers","archived":false,"fork":false,"pushed_at":"2018-04-04T15:38:13.000Z","size":3703,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-26T04:25:33.223Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/janit.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-04T13:42:22.000Z","updated_at":"2023-01-04T16:32:10.000Z","dependencies_parsed_at":"2023-02-21T04:30:25.971Z","dependency_job_id":null,"html_url":"https://github.com/janit/graphql-nextjs-wordpress","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janit%2Fgraphql-nextjs-wordpress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janit%2Fgraphql-nextjs-wordpress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janit%2Fgraphql-nextjs-wordpress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janit%2Fgraphql-nextjs-wordpress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/janit","download_url":"https://codeload.github.com/janit/graphql-nextjs-wordpress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251494110,"owners_count":21598236,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T19:37:20.617Z","updated_at":"2025-04-29T11:32:27.621Z","avatar_url":"https://github.com/janit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GraphQL and Next.js for WordPress devs\n\n\u003ccenter\u003e\u003csmall\u003eWordPress Helsinki Meetup\u003cbr /\u003eMarch 4th 2018 - Jani Tarvainen\u003c/small\u003e\u003c/center\u003e\n\n---\n\n## About me, Jani Tarvainen\n\n\u003cfigure class=\"about\"\u003e\n\u003cimg src=\"https://janit.iki.fi/shit/bigmug.png\"\u003e\nPersonal branding\u003chr /\u003e\n@velmu\n\u003c/figure\u003e\n - Web development for 20y+\n - Interested in all things\u003cbr/\u003etech and around it\n - Currently working mostly\u003cbr/\u003ewith content thingamajigs\n - Working knowledge of\u003cbr /\u003eTS/JS and Symfony/PHP\n - Day job at \u003ca href=\"https://ez.no\"\u003eeZ Systems\u003c/a\u003e,\u003cbr/\u003e night job at \u003ca href=\"https://malloc.fi\"\u003eMalloc\u003c/a\u003e\n\n---\n\n## GraphQL and Next.js\n\n- \u003ca href=\"https://graphql.org\"\u003eGraphQL\u003c/a\u003e \u0026mdash; kudos \u003ca href=\"https://facebook.com\"\u003eFB\u003c/a\u003e + Community\n  - Transfer protocol + Query Language\n  - An alternative to REST, but more defined\n  - Independent of backend technology\n- \u003ca href=\"https://github.com/zeit/next.js/\"\u003eNext.js\u003c/a\u003e \u0026mdash; kudos \u003ca href=\"http://zeit.co\"\u003eZeit\u003c/a\u003e + Community\n  - A Universal JavaScript framework\n  - Runs in the browser and server (with Node.js)\n  - Templating using React.js\n- GraphQL + Next.js\n  - A nice combo for decoupled app/site building\n  - We'll see how it works soon enough\n\n--\n\n## GraphQL and PHP\n\n- GraphQL reference implementation in JavaScript\n- Two mature GraphQL libraries for PHP\n  - \u003ca href=\"https://github.com/webonyx/graphql-php\"\u003eWebOnyx GraphQL library\u003c/a\u003e\n  - \u003ca href=\"https://github.com/Youshido/GraphQL\"\u003eYoushido GraphQL library\u003c/a\u003e\n- Both solid and feature complete in my experience\n- Please don't write your own GraphQL library!\n\n--\n\n## GraphQL and WordPress\n- WordPress does not ship with GraphQL support\n- WPGraphQL plugin adds GraphQL support\n  - Uses the WebOnyx library, stable foundations\n  - Good coverage from what I explored\n  - eZ to use \u0026mdash; even a WP noob could do it\n  - Open for custom API extensions\n  - More: https://wpgraphql.com\n- There are others, but this worked great for me\n\n---\n\n## WordPress and Next.js\n\n- Two independent technologies\n- Completely decoupled:\n  - Next.js the presentation framework\n  - WordPress the data source\n- GraphQL is the common ground\n- A solid foundation for \u003ca href=\"https://malloc.fi/pwas-fulfill-promise-of-iphone-for-web-developers\"\u003ePWA\u003c/a\u003es\n\n--\n\n## Example app walkthrough\n\n- Features\n  - List posts on front page\n  - Open individual post\n- Walkthrough\n  - WPGraphQL API\n  - Next.js core API\n  - Index view\n  - Post view\n- View the sauce:\n  - https://github.com/janit/graphql-nextjs-wordpress/tree/master/app\n\n---\n\n# Hot or not\n\n--\n\n## Hot\n\n- No compromise SEO\n- A fresh approach, learn new things\n- GraphQL syntax is legi… ble\n- Not tied to any system\n\n--\n\n## Not hot\n\n- Lose all the WP sitebuilding bonuses\n- WPGraphQL plugin compatibility?\n- Added complexity… for what?\n- It's fair to say GraphQL is overengineered\n\n---\n\n## Closing links\n\n - \u003ca href=\"http://graphql.org/users/\"\u003eGraphQL widely deployed at GitHub…\u003c/a\u003e\n - \u003ca href=\"https://react-etc.net/entry/who-is-using-next-js\"\u003eNext.js used by Docker, Magic Leap\u003c/a\u003e\n - Next.js Alternatives:\n  - \u003ca href=\"\"\u003eAfter.js for React users\u003c/a\u003e\n  - \u003ca href=\"https://react-etc.net/entry/next-js-vs-nuxt-js\"\u003eNuxt.js for Vue.js users\u003c/a\u003e\n - GraphQL platforms:\n  - \u003ca href=\"\n https://github.com/graphcool/graphcool-framework\"\u003eGraphCool Framework\u003c/a\u003e\n  - \u003ca href=\"https://react-etc.net/entry/prisma-is-a-database-agnostic-graphql-api-layer\"\u003ePrisma\u003c/a\u003e\n  -  \u003ca href=\"https://react-etc.net/entry/postgraphile-creates-a-graphql-api-from-a-postgresql-schema\"\u003ePostGraphile\u003c/a\u003e\n - \u003ca href=\"https://malloc.fi/building-decoupled-sites-and-apps-with-graphql-and-next-js\"\u003eSites and Apps with GraphQL and Next.js\u003c/a\u003e\n\n---\n\n# Thank you\n\n- Questions?","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanit%2Fgraphql-nextjs-wordpress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjanit%2Fgraphql-nextjs-wordpress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanit%2Fgraphql-nextjs-wordpress/lists"}