Now that we are good with Strapi let’s work on the frontend part!

Create the Query component

We will use Apollo to fetch your data from different pages. We don’t want you to rewrite the same code every time in your pages. This is why we are going to write a Query component that will be reusable!

• Let’s create a ./src/components/Query/index.js file containing the following code:

import React from "react";
import { useQuery } from "@apollo/react-hooks";

const Query = ({ children, query, id }) => {
  const { data, loading, error } = useQuery(query, {
    variables: { id: id }
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {JSON.stringify(error)}</p>;
  return children({ data });
};

export default Query;

We are using the useQuery hook to call your Strapi server at this address http://localhost:1337/graphql. We are sending an id if it exists (it will be necessary when you’ll want to fetch just one article).

If the request is successful, you will return the child component with the retrieved data as prop.

Let’s try it out by creating your navbar that will fetch all our categories but first let’s create the GraphQL query

• Let’s create a ./src/queries/category/categories.js file containing the following code:

import gql from "graphql-tag";

const CATEGORIES_QUERY = gql`
  query Categories {
    categories {
      id
      name
    }
  }
`;

export default CATEGORIES_QUERY;

Let’s use this query to display your categories inside your navbar

• Let’s create a ./src/components/Nav/index.js file containing the following code:

import React from "react";
import Query from "../Query";
import { Link } from "react-router-dom";

import CATEGORIES_QUERY from "../../queries/category/categories";

const Nav = () => {
  return (
    <div>
      <Query query={CATEGORIES_QUERY} id={null}>
        {({ data: { categories } }) => {
          return (
            <div>
              <nav className="uk-navbar-container" data-uk-navbar>
                <div className="uk-navbar-left">
                  <ul className="uk-navbar-nav">
                    <li>
                      <Link to="/">Strapi Blog</Link>
                    </li>
                  </ul>
                </div>

                <div className="uk-navbar-right">
                  <ul className="uk-navbar-nav">
                    {categories.map((category, i) => {
                      return (
                        <li key={category.id}>
                          <Link
                            to={`/category/${category.id}`}
                            className="uk-link-reset"
                          >
                            {category.name}
                          </Link>
                        </li>
                      );
                    })}
                  </ul>
                </div>
              </nav>
            </div>
          );
        }}
      </Query>
    </div>
  );
};

export default Nav;

Since we want our navigation bar to be in every pages of our application we are going to use it inside our App container

• Import and declare your navigation component inside your containers/App/index.js

import React from "react";
import Nav from "../../components/Nav";

function App() {
  return (
    <div className="App">
      <Nav />
    </div>
  );
}

export default App;

You should now be able to see your brand new navbar containing your categories. But the links are not working right now. We’ll work on this later in the tutorial, don’t worry.

Create the Articles containers

This container will wrap a component that will display all your articles

• Let’s create a containers/Articles/index.js file containing the following code:

import React from "react";
import Articles from "../../components/Articles";
import Query from "../../components/Query";
import ARTICLES_QUERY from "../../queries/article/articles";

const Home = () => {
  return (
    <div>
      <div className="uk-section">
        <div className="uk-container uk-container-large">
          <h1>Strapi blog</h1>
          <Query query={ARTICLES_QUERY}>
            {({ data: { articles } }) => {
              return <Articles articles={articles} />;
            }}
          </Query>
        </div>
      </div>
    </div>
  );
};

export default Home;

Let’s write the query that fetch all your articles

• Let’s create a ./src/queries/articles/articles.js file containing the following code:

import gql from "graphql-tag";

const ARTICLES_QUERY = gql`
  query Articles {
    articles {
      id
      title
      category {
        id
        name
      }
      image {
        url
      }
    }
  }
`;

export default ARTICLES_QUERY;

Now we need to create an Articles component that will display all of your articles and an Card component that will display each of your article:

• Let’s create a components/Articles/index.js file containing the following:

import React from "react";
import Card from "../Card";

const Articles = ({ articles }) => {
  const leftArticlesCount = Math.ceil(articles.length / 5);
  const leftArticles = articles.slice(0, leftArticlesCount);
  const rightArticles = articles.slice(leftArticlesCount, articles.length);

  return (
    <div>
      <div className="uk-child-width-1-2" data-uk-grid>
        <div>
          {leftArticles.map((article, i) => {
            return <Card article={article} key={`article__${article.id}`} />;
          })}
        </div>
        <div>
          <div className="uk-child-width-1-2@m uk-grid-match" data-uk-grid>
            {rightArticles.map((article, i) => {
              return <Card article={article} key={`article__${article.id}`} />;
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Articles;

• Let’s create a components/Card/index.js file containing the following code:

import React from "react";
import { Link } from "react-router-dom";

const Card = ({ article }) => {
  const imageUrl =
    process.env.NODE_ENV !== "development"
      ? article.image.url
      : process.env.REACT_APP_BACKEND_URL + article.image.url;
  return (
    <Link to={`/article/${article.id}`} className="uk-link-reset">
      <div className="uk-card uk-card-muted">
        <div className="uk-card-media-top">
          <img
            src={imageUrl}
            alt={article.image.url}
            height="100"
          />
        </div>
        <div className="uk-card-body">
          <p id="category" className="uk-text-uppercase">
            {article.category.name}
          </p>
          <p id="title" className="uk-text-large">
            {article.title}
          </p>
        </div>
      </div>
    </Link>
  );
};

export default Card;

Everything is ready, we just need to import the Articles container inside the App container.

• Import and declare your Articles container inside your containers/App/index.js:

import React from "react";

import Articles from "../Articles";
import Nav from "../../components/Nav";

function App() {
  return (
    <div className="App">
      <Nav />
      <Articles />
    </div>
  );
}

export default App;