@graphcommerce/graphcms-ui 9.0.0-canary.98 → 9.0.0

package/graphql/PagesStaticPaths.graphql

@@ -1,6 +0,0 @@
-query PagesStaticPaths($urlStartsWith: String!, $first: Int = 1000) {
-  pages(where: { url_starts_with: $urlStartsWith }, first: $first) {
-    url
-    metaRobots
-  }
-}

package/graphql/index.ts

@@ -1,5 +0,0 @@
-export * from './HygraphAllPages.gql'
-export * from './HygraphPage.gql'
-export * from './HygraphPages.gql'
-export * from './PageLink.gql'
-export * from './PagesStaticPaths.gql'

package/lib/getAllHygraphPages.ts

@@ -1,43 +0,0 @@
-import type { ApolloClient, NormalizedCacheObject, ApolloQueryResult } from '@apollo/client'
-import { cacheFirst } from '@graphcommerce/graphql'
-import { HygraphAllPagesDocument, HygraphAllPagesQuery } from '../graphql'
-
-type Urls = { url: string }
-
-export async function getAllHygraphPages(
-  client: ApolloClient<NormalizedCacheObject>,
-  options: { pageSize?: number } = {},
-) {
-  const { pageSize = 100 } = options
-
-  const query = client.query({
-    query: HygraphAllPagesDocument,
-    variables: { first: pageSize },
-    fetchPolicy: cacheFirst(client),
-  })
-  const pages: Promise<ApolloQueryResult<HygraphAllPagesQuery>>[] = [query]
-
-  const { data } = await query
-  const totalPages = Math.ceil(data.pagesConnection.aggregate.count / pageSize) ?? 1
-
-  if (totalPages > 1) {
-    for (let i = 2; i <= totalPages; i++) {
-      pages.push(
-        client.query({
-          query: HygraphAllPagesDocument,
-          variables: { first: pageSize, skip: pageSize * (i - 1) },
-          fetchPolicy: cacheFirst(client),
-        }),
-      )
-    }
-  }
-
-  const paths: Urls[] = (await Promise.all(pages))
-    .map((q) => q.data.pages)
-    .flat(1)
-    .map((page) => ({
-      url: page.url,
-    }))
-
-  return paths
-}

package/lib/getHygraphPaths.ts

@@ -1,43 +0,0 @@
-import { ApolloClient, NormalizedCacheObject, ApolloQueryResult } from '@apollo/client'
-import type { PageWhereInput } from '@graphcommerce/graphql-mesh'
-import { GetStaticPathsResult } from 'next'
-import {
-  HygraphStaticPathsDocument,
-  HygraphStaticPathsQuery,
-} from '../graphql/HygraphStaticPaths.gql'
-
-type Return = GetStaticPathsResult<{ url: string }>
-
-export async function getHygraphStaticPaths(
-  client: ApolloClient<NormalizedCacheObject>,
-  locale: string,
-  options: { pageSize?: number; filter?: PageWhereInput } = {},
-) {
-  const { pageSize = 100, filter = {} } = options
-  const query = client.query({
-    query: HygraphStaticPathsDocument,
-    variables: { pageSize, where: filter },
-  })
-  const pages: Promise<ApolloQueryResult<HygraphStaticPathsQuery>>[] = [query]
-
-  const { data } = await query
-  const totalPages = Math.ceil(data.pagesConnection.aggregate.count / pageSize) ?? 1
-
-  if (totalPages > 1) {
-    for (let i = 2; i <= totalPages; i++) {
-      pages.push(
-        client.query({
-          query: HygraphStaticPathsDocument,
-          variables: { pageSize, skip: pageSize * (i - 1), where: filter },
-        }),
-      )
-    }
-  }
-
-  const paths: Return['paths'] = (await Promise.all(pages))
-    .map((q) => q.data.pages)
-    .flat(1)
-    .map((page) => ({ params: page, locale }))
-
-  return paths
-}

package/lib/hygraphPageContent.ts

@@ -1,48 +0,0 @@
-import { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
-import { HygraphPagesQuery, HygraphPagesDocument } from '../graphql'
-import { getAllHygraphPages } from './getAllHygraphPages'
-
-/**
- * Fetch the page content for the given urls.
- *
- * - Uses an early bailout to check to reduce hygraph calls.
- * - Implements an alias sytem to merge the content of multiple pages.
- */
-async function pageContent(
-  client: ApolloClient<NormalizedCacheObject>,
-  url: string,
-  cached: boolean,
-): Promise<{ data: HygraphPagesQuery }> {
-  /**
-   * Some routes are very generic and wil be requested very often, like 'product/global'. To reduce
-   * the amount of requests to Hygraph we can cache the result of the query if requested.
-   *
-   * This only works in a persistent nodejs environment and doesn't work in a serverless
-   * environment, because those instances get discarded.
-   *
-   * This comes with a downside, if the page is updated the cache will not be invalidated, resulting
-   * in stale data.
-   *
-   * Todo: Implement next.js 13 fetch revalidation:
-   * https://beta.nextjs.org/docs/data-fetching/fetching#revalidating-data
-   */
-  const alwaysCache = process.env.NODE_ENV !== 'development' ? 'cache-first' : undefined
-  const fetchPolicy = cached ? alwaysCache : undefined
-
-  const allRoutes = await getAllHygraphPages(client)
-  // Only do the query when there the page is found in the allRoutes
-  const found = allRoutes.some((page) => page.url === url)
-
-  return found
-    ? client.query({ query: HygraphPagesDocument, variables: { url }, fetchPolicy })
-    : Promise.resolve({ data: { pages: [] } })
-}
-
-export async function hygraphPageContent(
-  client: ApolloClient<NormalizedCacheObject>,
-  url: string,
-  additionalProperties?: Promise<object> | object,
-  cached = false,
-): Promise<{ data: HygraphPagesQuery }> {
-  return pageContent(client, url, cached)
-}

package/lib/index.ts

@@ -1,2 +0,0 @@
-export * from './hygraphPageContent'
-export * from './getHygraphPaths'

package/plugins/HygraphPreviewModeToolbar.tsx

@@ -1,80 +0,0 @@
-import {
-  usePreviewModeForm,
-  type PreviewModeToolbarProps,
-  SelectElement,
-  previewModeDefaults,
-} from '@graphcommerce/ecommerce-ui'
-import { TypedDocumentNode, gql, useQuery } from '@graphcommerce/graphql'
-import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import React, { useMemo } from 'react'
-
-export const config: PluginConfig = {
-  type: 'component',
-  module: '@graphcommerce/ecommerce-ui',
-}
-
-const ContentStages = gql`
-  query {
-    __type(name: "Stage") {
-      name
-      enumValues {
-        name
-        description
-      }
-    }
-  }
-` as TypedDocumentNode<{
-  __type: {
-    name: 'Stage'
-    enumValues: {
-      name: string
-      description: string
-    }[]
-  }
-}>
-
-const HygraphConfig = React.memo(() => {
-  const form = usePreviewModeForm()
-  const { control } = form
-
-  const contentStages = useQuery(ContentStages)
-
-  const defaultValue = previewModeDefaults().hygraphStage ?? 'PUBLISHED'
-
-  return useMemo(
-    () => (
-      <SelectElement
-        control={control}
-        name='previewData.hygraphStage'
-        defaultValue={defaultValue}
-        color='secondary'
-        select
-        label='Hygraph Stage'
-        size='small'
-        sx={{ width: '150px' }}
-        SelectProps={{ MenuProps: { style: { zIndex: 20000 } } }}
-        onChange={() => {}}
-        options={
-          contentStages.loading
-            ? [{ id: defaultValue, label: defaultValue }]
-            : filterNonNullableKeys(contentStages.data?.__type.enumValues).map(({ name }) => ({
-                id: name,
-                label: name,
-              }))
-        }
-      />
-    ),
-    [contentStages.data?.__type.enumValues, contentStages.loading, control],
-  )
-})
-
-export const PreviewModeToolbar = (props: PluginProps<PreviewModeToolbarProps>) => {
-  const { Prev, ...rest } = props
-  return (
-    <>
-      <Prev {...rest} />
-      <HygraphConfig />
-    </>
-  )
-}

package/plugins/hygraphGraphqlConfig.ts

@@ -1,35 +0,0 @@
-import { graphqlConfig as graphqlConfigType, setContext } from '@graphcommerce/graphql'
-import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
-
-export const config: PluginConfig = {
-  type: 'function',
-  module: '@graphcommerce/graphql',
-}
-
-declare module '@graphcommerce/graphql/config' {
-  interface PreviewData {
-    hygraphStage?: string
-  }
-}
-
-export const graphqlConfig: FunctionPlugin<typeof graphqlConfigType> = (prev, config) => {
-  const results = prev(config)
-
-  const locales = config.storefront.hygraphLocales
-
-  if (!locales) return prev(config)
-
-  const hygraphLink = setContext((_, context) => {
-    if (!context.headers) context.headers = {}
-    context.headers['gcms-locales'] = locales.join(',')
-
-    const stage = config.previewData?.hygraphStage ?? 'DRAFT'
-    if (config.preview) {
-      context.headers['gcms-stage'] = stage
-    }
-
-    return context
-  })
-
-  return { ...results, links: [...results.links, hygraphLink] }
-}

package/plugins/hygraphPreviewModeDefaults.ts

@@ -1,12 +0,0 @@
-import { previewModeDefaults as base } from '@graphcommerce/ecommerce-ui'
-import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
-
-export const config: PluginConfig = {
-  type: 'function',
-  module: '@graphcommerce/ecommerce-ui',
-}
-
-export const previewModeDefaults: FunctionPlugin<typeof base> = (prev, ...args) => ({
-  ...prev(...args),
-  hygraphStage: 'DRAFT',
-})