Add pages page and allow using pages as homepage blocks

components/HomepageBlock.tsx

@@ -2,13 +2,23 @@ import { MenuItemFragment, ProductFilterInput } from "@/saleor/api";
 import Link from "next/link";
 import React from "react";
 import { ProductCollection } from ".";
+import RichText from "./RichText";
 
 export interface HomepageBlockProps {
   menuItem: MenuItemFragment;
 }
 
 export const HomepageBlock: React.VFC<HomepageBlockProps> = ({ menuItem }) => {
   const filter: ProductFilterInput = {};
+  if (!!menuItem.page?.id) {
+    return (
+      <div className="pb-10">
+        {!!menuItem.page?.content && (
+          <RichText jsonStringData={menuItem.page?.content} />
+        )}
+      </div>
+    );
+  }
   let link = "";
   if (!!menuItem.category?.id) {
     filter.categories = [menuItem.category?.id];

graphql/queries.graphql

@@ -517,10 +517,11 @@ fragment MenuItemFragment on MenuItem {
   page {
     id
     slug
+    content
   }
 }
 
-query menuQuery($slug: String!) {
+query MenuQuery($slug: String!) {
   menu(channel: "default-channel", slug: $slug) {
     id
     name
@@ -530,3 +531,15 @@ query menuQuery($slug: String!) {
     }
   }
 }
+
+query PageQuery($slug: String!) {
+  page(slug: $slug) {
+    id
+    title
+    seoTitle
+    seoDescription
+    slug
+    created
+    content
+  }
+}

pages/page/[slug].tsx

@@ -0,0 +1,46 @@
+import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
+import { usePageQuery } from "@/saleor/api";
+import BaseTemplate from "@/components/BaseTemplate";
+import RichText from "@/components/RichText";
+
+export const getStaticProps = async (context: GetStaticPropsContext) => {
+  return {
+    props: {
+      pageSlug: context.params?.slug?.toString(),
+    },
+  };
+};
+
+const PagePage: React.VFC<InferGetStaticPropsType<typeof getStaticProps>> = ({
+  pageSlug,
+}) => {
+  const { loading, error, data } = usePageQuery({
+    variables: { slug: pageSlug || "" },
+    skip: !pageSlug,
+  });
+
+  if (loading) return <BaseTemplate isLoading={true} />;
+  if (error) return <p>Error</p>;
+
+  const page = data?.page;
+  if (!page?.id) {
+    return null;
+  }
+
+  return (
+    <BaseTemplate>
+      <main className="max-w-7xl mx-auto pt-8 px-8">
+        {!!page.content && <RichText jsonStringData={page.content} />}
+      </main>
+    </BaseTemplate>
+  );
+};
+
+export default PagePage;
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: true,
+  };
+}

saleor/api.tsx

@@ -12813,14 +12813,21 @@ export type MeDetailsQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type MeDetailsQuery = { __typename?: 'Query', me?: Maybe<{ __typename?: 'User', id: string, lastLogin?: Maybe<any>, dateJoined: any, email: string, firstName: string, lastName: string, avatar?: Maybe<{ __typename?: 'Image', url: string, alt?: Maybe<string> }>, orders?: Maybe<{ __typename?: 'OrderCountableConnection', totalCount?: Maybe<number> }> }> };
 
-export type MenuItemFragment = { __typename?: 'MenuItem', id: string, name: string, category?: Maybe<{ __typename?: 'Category', id: string, slug: string }>, collection?: Maybe<{ __typename?: 'Collection', id: string, slug: string }>, page?: Maybe<{ __typename?: 'Page', id: string, slug: string }> };
+export type MenuItemFragment = { __typename?: 'MenuItem', id: string, name: string, category?: Maybe<{ __typename?: 'Category', id: string, slug: string }>, collection?: Maybe<{ __typename?: 'Collection', id: string, slug: string }>, page?: Maybe<{ __typename?: 'Page', id: string, slug: string, content?: Maybe<string> }> };
 
 export type MenuQueryVariables = Exact<{
   slug: Scalars['String'];
 }>;
 
 
-export type MenuQuery = { __typename?: 'Query', menu?: Maybe<{ __typename?: 'Menu', id: string, name: string, slug: string, items?: Maybe<Array<Maybe<{ __typename?: 'MenuItem', id: string, name: string, category?: Maybe<{ __typename?: 'Category', id: string, slug: string }>, collection?: Maybe<{ __typename?: 'Collection', id: string, slug: string }>, page?: Maybe<{ __typename?: 'Page', id: string, slug: string }> }>>> }> };
+export type MenuQuery = { __typename?: 'Query', menu?: Maybe<{ __typename?: 'Menu', id: string, name: string, slug: string, items?: Maybe<Array<Maybe<{ __typename?: 'MenuItem', id: string, name: string, category?: Maybe<{ __typename?: 'Category', id: string, slug: string }>, collection?: Maybe<{ __typename?: 'Collection', id: string, slug: string }>, page?: Maybe<{ __typename?: 'Page', id: string, slug: string, content?: Maybe<string> }> }>>> }> };
+
+export type PageQueryVariables = Exact<{
+  slug: Scalars['String'];
+}>;
+
+
+export type PageQuery = { __typename?: 'Query', page?: Maybe<{ __typename?: 'Page', id: string, title: string, seoTitle?: Maybe<string>, seoDescription?: Maybe<string>, slug: string, created: any, content?: Maybe<string> }> };
 
 export const AddressFragmentDoc = gql`
     fragment AddressFragment on Address {
@@ -13064,6 +13071,7 @@ export const MenuItemFragmentDoc = gql`
   page {
     id
     slug
+    content
   }
 }
     `;
@@ -13923,7 +13931,7 @@ export type MeDetailsQueryHookResult = ReturnType<typeof useMeDetailsQuery>;
 export type MeDetailsQueryLazyQueryHookResult = ReturnType<typeof useMeDetailsQueryLazyQuery>;
 export type MeDetailsQueryQueryResult = Apollo.QueryResult<MeDetailsQuery, MeDetailsQueryVariables>;
 export const MenuQueryDocument = gql`
-    query menuQuery($slug: String!) {
+    query MenuQuery($slug: String!) {
   menu(channel: "default-channel", slug: $slug) {
     id
     name
@@ -13962,6 +13970,47 @@ export function useMenuQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<
 export type MenuQueryHookResult = ReturnType<typeof useMenuQuery>;
 export type MenuQueryLazyQueryHookResult = ReturnType<typeof useMenuQueryLazyQuery>;
 export type MenuQueryQueryResult = Apollo.QueryResult<MenuQuery, MenuQueryVariables>;
+export const PageQueryDocument = gql`
+    query PageQuery($slug: String!) {
+  page(slug: $slug) {
+    id
+    title
+    seoTitle
+    seoDescription
+    slug
+    created
+    content
+  }
+}
+    `;
+
+/**
+ * __usePageQuery__
+ *
+ * To run a query within a React component, call `usePageQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePageQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = usePageQuery({
+ *   variables: {
+ *      slug: // value for 'slug'
+ *   },
+ * });
+ */
+export function usePageQuery(baseOptions: Apollo.QueryHookOptions<PageQuery, PageQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PageQuery, PageQueryVariables>(PageQueryDocument, options);
+      }
+export function usePageQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PageQuery, PageQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PageQuery, PageQueryVariables>(PageQueryDocument, options);
+        }
+export type PageQueryHookResult = ReturnType<typeof usePageQuery>;
+export type PageQueryLazyQueryHookResult = ReturnType<typeof usePageQueryLazyQuery>;
+export type PageQueryQueryResult = Apollo.QueryResult<PageQuery, PageQueryVariables>;
 export type AccountAddressCreateKeySpecifier = ('accountErrors' | 'address' | 'errors' | 'user' | AccountAddressCreateKeySpecifier)[];
 export type AccountAddressCreateFieldPolicy = {
 	accountErrors?: FieldPolicy<any> | FieldReadFunction<any>,