How to Setup GraphQL API on WordPress – Headless WP using Next.js [Part 6]

In this tutorial, we will continue our series on setting up a GraphQL API on WordPress with a headless CMS approach using Next.js.

Step 1: Install WPGraphQL Plugin

First, we need to install and activate the WPGraphQL plugin on our WordPress site. This plugin allows us to expose a GraphQL API from our WordPress installation.

        <?php
        // ...
        function my_enqueue_assets() {
          wp_enqueue_script( 'wp-graphql-next-js', get_template_directory_uri() . '/js/apollo.client.js', [ 'wp-graphql' ], false, false );
        }
      

Step 2: Configure Next.js to Use WPGraphQL

Next, we need to configure our Next.js application to use the WPGraphQL API. We can do this by setting up a client to make GraphQL queries to our WordPress site using the Apollo Client library.

        import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
        import fetch from "cross-fetch";

        const client = new ApolloClient({
          link: new HttpLink({
            uri: "https://your-wordpress-site.com/graphql",
            fetch
          }),
          cache: new InMemoryCache()
        });
      

Step 3: Query Data from WordPress Using GraphQL

Now that we have set up our Next.js app to use WPGraphQL, we can start querying data from our WordPress site using GraphQL. We can create queries to retrieve posts, pages, categories, and any custom post types or fields that we have set up in our WordPress installation.

        import { gql } from "@apollo/client";

        const GET_POSTS = gql`
          query GetPosts {
            posts {
              nodes {
                id
                title
                content
              }
            }
          }
        `;
      

Conclusion

By following these steps, you can set up a GraphQL API on WordPress with a headless CMS approach using Next.js. This allows you to easily query your WordPress data using GraphQL and build fast and interactive web applications with Next.js.