Frontend Implementation

Headless Frontend Section [user view] basically build based on this procedure.

1. Pages are built according to Next JS paradigm.
2. Each pages are build on some Containers
3. Each Container hold on some components
4. Components render the data and perform their tasks
5. Datas are fetched via the GraphQL queries.

Now, Pages, Containers & Components related information you can grab via the project folder structure discussed before. Let's make a dive into the Data fetching using GraphQL queries and some very related tasks.

For data fetching we are using useQuery hook from @apollo/react-hooks

For example :

let's discuss here a query to fetch post data and display on the Home grid.

GraphQL Query :

import gql from 'graphql-tag';

export const GET_ALL_POST = gql`
  query getAllPost($LIMIT: Int, $page: Int) {
    posts(limit: $LIMIT, page: $page) {
      data {
        id
        slug
        title
        price
        image {
          url
          largeUrl
        }
      }
      total
    }
  }
`;

Then this query need to be called in the Container where you need to display & process the data.

Now, in the Home container import that query and prepared the data.

// pseudo code //

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import { GET_ALL_POST } from '[FROM-THE-JS-FILE-THE-QUERY-IS-WRITTEN]';


const Home = () => {

  // QUERY SECTION
  let QUERY_VARIABLES = {
    LIMIT: 8,
  };
  const { data, loading, error } = useQuery(GET_ALL_POST, {
    variables: QUERY_VARIABLES,
  });

  // Extract Post Data
  const postData = data.posts ? data.posts.data : [];

  return (
    <React.Fragment>
      <YOUR_HOME_CONTAINER /> 
    </React.Fragment>
  );

}

export default Home