How to create a simple blog with React.js, Apollo Client and Hygraph?

In this post, we will create a simple blog with React.js, Apollo Client, and Hygraph. React is a popular JavaScript library for building user interfaces, while Hygraph (known before as GraphCMS) is a headless content management system (CMS) that provides a GraphQL API for querying and manipulating content. Integrating React and GraphCMS allows you to build dynamic, data-driven applications with a modern, flexible architecture.

We are going to use the Apollo Client library to connect our React app to our GraphCMS endpoint. Apollo Client is a powerful GraphQL client that makes it easy to fetch and cache data from a GraphQL API.

We are also going to use the useQuery hook from Apollo Client to fetch a list of blog posts from our Hygraph endpoint. This hook returns loading, error, and data objects that we can use to render our UI based on the state of the query. By using GraphQL to fetch our data, we can specify exactly what data we want to fetch and avoid over-fetching or under-fetching data.

Overall, integrating React and Hygraph provides a flexible, scalable way to build data-driven applications. By using GraphQL and a headless CMS like Hygraph, you can decouple your content from your application logic and build highly modular, reusable components that can be easily updated and scaled over time.

Creation step by step

Here is a step-by-step guide to creating a blog with React.js, Apollo Client, and Hygraph:

1.-Create a new React app using Create React App by running the following command in your terminal:

npx create-react-app my-blog

2.-Install the required dependencies:

1
2

cd my-blog
npm install --save @apollo/client graphql

3.-Create a new Hygraph account and set up your blog schema. You can use the GraphCMS UI to create your schema or use the GraphQL Playground to create and execute your schema

4.-Once your schema is created, you need to create a GraphQL endpoint that your React app can query. You can do this by creating an API key in the HygraphUI and using it to authenticate your requests.

5.-Create a new file called apollo-client.js in the src directory of your React app. This file will contain the configuration for your Apollo client, which you will use to query your Hygraphendpoint. Here's an example of what your apollo-client.js file might look like:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-hygraph-endpoint',
  cache: new InMemoryCache()
});

export default client;

6.-In your index.js file, wrap your entire app in an ApolloProvider component, which will provide the Apollo client to all components in your app. Here's an example:

import { ApolloProvider } from '@apollo/client';
import client from './apollo-client';

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

7.-Create a new component called BlogPostList that will display a list of blog posts. This component will use the useQuery hook from Apollo to fetch data from your Hygraph endpoint:

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

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

function BlogPostList() {
  const { loading, error, data } = useQuery(GET_POSTS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

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

export default BlogPostList;

8.-Import your BlogPostList component into your App.js file and render it in your app.

import BlogPostList from './BlogPostList';

function App() {
  return (
    <div>
      <h1>My Blog</h1>
      <BlogPostList />
    </div>
  );
}

export default App;

That's it! You should now be able to see a list of blog posts fetched from your HygraphCMS endpoint when you run your React app. From here, you can customize your blog to fit your specific needs and add additional features like blog post pages, comments, and more.

Created by Roberto Espinoza

How to create a simple blog with React.js, Apollo Client and Hygraph?

Creation step by step

More Posts