Products Price Query Gqty

index.js

import { getNextStaticProps } from '@faustjs/next';
import React from 'react';
import { client } from 'client';
import { getArrayFields, getFields, prepass } from 'gqty';
import { FaArrowRight } from 'react-icons/fa';
import {
  Header,
  Footer,
  EntryHeader,
  Main,
  Button,
  Heading,
  CTA,
  SEO,
  Products,
  Categories,
} from 'components';
import styles from 'styles/pages/_Home.module.scss';
import { pageTitle } from 'utils';

//const postsPerPage = 3;

/**
 * Prepass fields for product nodes. This lists all the pieces of data we need
 * for each product node. Running the following through `prepass` ensures that
 * all of the data is there when we need it, and no cascading requests happen.
 *
 * @see https://gqty.dev/docs/client/helper-functions#prepass
 */
const PRODUCT_NODES_PREPASS_FIELDS = [
  'databaseId',
  'id',
  '__typename',
  'image.sourceUrl',
  'slug',
  'summary',
  'name',
  '$on.SimpleProduct.price',
];

export default function Page() {
  const { useQuery } = client;
  const generalSettings = useQuery().generalSettings;
  const mainBanner = {
    sourceUrl: '/static/best-tutoring-banner.jpg',
    mediaDetails: { width: 1200, height: 600 },
    altText: 'Blog Banner',
  };
  const categories = useQuery()?.productCategories();
  const data = useQuery({
    prepare({ prepass, query }) {
      prepass(query.products, ...PRODUCT_NODES_PREPASS_FIELDS);
    },
  })?.products();

  return (
    <>
      <SEO
        title={pageTitle(generalSettings)}
        imageUrl={mainBanner?.sourceUrl}
      />

      <Header />

      <Main className={styles.home}>
        <EntryHeader image={mainBanner} />
        <div className="container">
          <section className={styles.posts}>
            <Heading className={styles.heading} level="h2">
              <span className={styles.headingInner}>Categories</span>
            </Heading>
            <Categories categories={categories?.nodes} id="categories-list" />
          </section>
          <section className="cta">
            <CTA
              Button={() => (
                <Button href="/posts">
                  Get Started <FaArrowRight style={{ marginLeft: `1rem` }} />
                </Button>
              )}
            >
              <span>
                Learn about Core Web Vitals and how Atlas can help you reach
                your most demanding speed and user experience requirements.
              </span>
            </CTA>
          </section>
          <section className={styles.posts}>
            <Heading className={styles.heading} level="h2">
              <span className={styles.headingInner}>Tutoring Products</span>
            </Heading>
            <div className="container">
              <Products products={data?.nodes} id="products-list" />
            </div>
          </section>
          <section className="cta">
            <CTA
              Button={() => (
                <Button href="/posts">
                  Get Started <FaArrowRight style={{ marginLeft: `1rem` }} />
                </Button>
              )}
            >
              <span>
                Learn about Core Web Vitals and how Atlas can help you reach
                your most demanding speed and user experience requirements.
              </span>
            </CTA>
          </section>
        </div>
      </Main>

      <Footer />
    </>
  );
}

export async function getStaticProps(context) {
  return getNextStaticProps(context, {
    Page,
    client,
  });
}