Next.js Tutorial – How to Fetch Posts from WordPress GraphQL API [part 7]

Welcome to part 7 of our Next.js tutorial series. In this tutorial, we will learn how to fetch posts from a WordPress site using the GraphQL API and render them in a Next.js application.

Prerequisites

In order to follow along with this tutorial, you’ll need the following:

• Basic knowledge of React and Next.js
• A WordPress site with the WPGraphQL plugin installed and configured
• A Next.js application set up and running

Fetching Posts from WordPress using GraphQL

First, we need to install the `@apollo/client` package in our Next.js application. We can do this by running the following command in the terminal:

      
        npm install @apollo/client graphql
      
    

Next, we can create a new file called `apolloClient.js` and configure our Apollo client to connect to the WordPress GraphQL API:

      
        import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
        import { setContext } from '@apollo/client/link/context';

        const httpLink = createHttpLink({
          uri: 'https://your-wordpress-site.com/graphql',
        });

        const authLink = setContext((_, { headers }) => {
          const token = process.env.WORDPRESS_AUTH_TOKEN;
          return {
            headers: {
              ...headers,
              authorization: token ? `Bearer ${token}` : "",
            }
          }
        });

        const client = new ApolloClient({
          link: authLink.concat(httpLink),
          cache: new InMemoryCache(),
        });

        export default client;
      
    

Now that our Apollo client is set up, we can create a new component called `PostList` to fetch and render the posts:

      
        import { useQuery, gql } from '@apollo/client';

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

        function PostList() {
          const { loading, error, data } = useQuery(POSTS_QUERY);

          if (loading) return 
Loading...
;
          if (error) return 
Error: ${error.message}
;

          return (
            <div>
              <h2>Posts</h2>
              <ul>
                {data.posts.nodes.map(post => (
                  <li key={post.id}>
                    <h3>{post.title}</h3>
                    <p>{post.content}</p>
                  </li>
                ))}
              </ul>
            </div>
          );
        }

        export default PostList;
      
    

Rendering the PostList component in our Next.js application

Finally, we can import and render the `PostList` component in our Next.js pages:

      
        import PostList from '../components/PostList';

        function Home() {
          return (
            <div>
              <h1>Welcome to my WordPress Blog</h1>
              <PostList />
            </div>
          );
        }

        export default Home;
      
    

And that’s it! We have successfully fetched and rendered posts from our WordPress site using the GraphQL API in our Next.js application.