React Summit

React Summit 2022

Let's get started with the workshop on building a Headless WordPress app with Next.js and WP GraphQL. We'll cover the benefits and drawbacks of a headless approach, explore the finished application and blog page, and implement features like search and single blog post pages. We'll also learn how to turn WordPress into a GraphQL server, set up Apollo Client, compose GraphQL queries, and use fragments. The workshop discusses caching, cache invalidation, and the use of Next.js as a static site generator. Various CMS options are compared, including WordPress, Contentful, Sanity, Prismic, and Strapi.

<p>In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.</p>

Build a Headless WordPress App with Next.js and WPGraphQL

Kellen Mace

In this Talk, the concept of headless WordPress and its benefits for developers are discussed. The use of front-end frameworks like Remix, Nuxt, Next, or SvelteKit to interact with WordPress through REST or GraphQL APIs is highlighted. The process of creating content models, adding data, and querying the GraphQL schema is explained. The setup of a basic Remix app with Apollo Client and the loading of data into route components using Remix are covered. The handling of dynamic routing with Remix and WordPress is also explored.

<p>One of the largest draws of headless or decoupled WordPress architecture is that we can endlessly remix the WordPress CMS that content creators love with the latest and greatest of web technology. This presentation will demonstrate how quickly a developer can get up and running with headless WordPress development using the Remix full stack framework. Using open source tools like WPGraphQL and Atlas Content Modeler, you can transform your WordPress site into a powerful headless CMS that serves data via GraphQL. We’ll see how we can query for and use that data in a Remix app, and also discuss how the framework’s focus on web fundamentals can benefit both the developer and the visitors who use our sites.</p>

Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals

Jeff Everhart

GraphQL Galaxy

GraphQL Galaxy 2021

WordPress is widely used, and it now supports a REST API for headless usage. Serving static HTML files allows for infinite scaling and surviving viral traffic. GraphQL can be used to interface with WordPress data, reducing complexity. WordPress can be coupled with plugins like Yoast and ACF, and WPGraphQL works seamlessly with these plugins. GraphQL allows for selecting only necessary data and has performance advantages over REST APIs.

<p>Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance.</p><p><br /></p><p>With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.</p><p>We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web.<br /><br /><a href="https://www.colfayock.com/event-notes/graphql-galaxy-2021" target="_blank">Slides &amp; more</a></p><p>  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a></p>

Exploring the WordPress Graph with Next.js & WPGraphQL

Colby Fayock

GraphQL Galaxy 2020

WordPress, powering 30% of all websites, faces issues with overfetching and underfetching when using its REST API. WPGraphQL, a plugin for WordPress, solves this problem by using GraphQL, reducing API calls and improving scalability. By installing WPGraphQL and writing queries, developers can easily fetch data and transform it for rendering. WPGraphQL has been used by popular websites like qz.com and apollographql.com, and it recently hit 1.0. Gatsby Source WordPress is a faster version of Gatsby that works well with WPGraphQL, and Gatsby can handle building large sites. WPGraphQL does not currently support data subscriptions, but community contributions are welcome. The new Gatsby-sourced WordPress plugin offers benefits like real-time preview and incremental builds.

<div><div><div><div><div><p>WordPress has been around for a really long time and is the most popular CMS on the web. Consuming its REST API however to build modern static sites leaves a lot to be desired. In this talk, we’ll live code a site that consumes WordPress over GraphQL and see the power of GraphQL in making mature and familiar services, easy to consume.</p></div></div></div></div></div><div><div><div></div></div></div><p>  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a></p>

Using GraphQL on WordPress

Sid Chatterjee

JSNation Live

JSNation Live 2020

Frontity is a framework that combines WordPress and React to create modern user experiences. It is easy to use, SEO-friendly, and extensible. The framework has achieved great results for publishers, increasing page views, organic traffic, and user acquisition. Frontity Pro has served millions of page views worldwide and provides a seamless content management experience. Visit frontity.org to learn more and join the community.

<p>In this talk, Pablo Postigo, co-Founder and CEO of Frontity, will give an introduction to the basics of Frontity Framework and talk about the main challenges when developing a React front-end for a headless WordPress site. In addition, he will share his insight on the future of JavaScript in the WordPress ecosystem and the story behind Frontity.</p><p>  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a></p>

Building React frontends for WordPress

Pablo Postigo

React Summit Remote Edition

React Summit Remote Edition 2021

Headless WordPress allows developers to build the front end using React frameworks like Gatsby or Next, bringing WordPress into the modern development age. The integration of external APIs with Headless WordPress allows for a mix and match approach, using APIs directly or pulling data through WordPress. The project demonstrates the use of Reactaits for state management and the implementation of SEO using Yoast. The workshop also covers the process of retrieving post data, building product cards, and adding products to the cart in a Headless WordPress and Shopify integration. The session concludes with resources for further learning and community engagement.

<p>When working with Headless WordPress it can be daunting having to setup an e-commerce site. This workshop will take you through connecting a Shopify app with your WordPress site, linking your WordPress content to your Shopify products, building a React and NextJS frontend to show your products and posts, using Yoast SEO, and deploying your site to WP Engine’s Atlas platform.</p><p>  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a></p>

Workshop: Mixing Content, Commerce, and SEO with Headless WordPress

Matt Landers

Will Johnston

WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.

<p>As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static.</p><p>  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a></p>

#wordpress