feat(datocms): load collection with route fragment definitions

Author: jurgenbelien

.graphqlrc.ts

@@ -34,7 +34,6 @@ module.exports = {
           * @see https://github.com/Tonel/typescript-type-generation-graphql-example/blob/2d43584b1d75c9086c4ddd594a6b2401a29b0055/graphql.config.yml#L11-L23
           */
           config: {
-            dedupeFragments: true,
             strictScalars: true,
             scalars: {
               BooleanType: 'boolean',
@@ -68,4 +67,3 @@ module.exports = {
     },
   },
 };
-

src/env.d.ts

@@ -15,3 +15,9 @@ declare module '*.query.graphql' {
   const value: DocumentNode;
   export = value;
 }
+
+declare module '*.fragment.graphql' {
+  import { DocumentNode } from 'graphql';
+  const value: DocumentNode;
+  export default value;
+}

src/lib/datocms/index.ts

@@ -1,6 +1,5 @@
-import { parse } from 'graphql';
+import { Kind, parse, type DocumentNode } from 'graphql';
 import { print } from 'graphql/language/printer';
-import type { DocumentNode } from 'graphql';
 import type { SiteLocale } from '@lib/i18n/types';
 import { titleSuffix } from '@lib/seo';
 import { datocmsBuildTriggerId, datocmsEnvironment } from '../../../datocms-environment';
@@ -61,8 +60,13 @@ interface CollectionData<CollectionType> {
   [key: string]: CollectionType[];
 }
 
-type CollectionMeta = {
-  count: number;
+type CollectionInfo = {
+  meta: {
+    count: number;
+  }
+  records: [{
+    __typename: string;
+  }]
 };
 
 /**
@@ -72,35 +76,50 @@ type CollectionMeta = {
  * DatoCMS GraphQL API has a limit of 100 records per request.
  * This function uses pagination to get all records.
  * @see https://www.datocms.com/docs/content-delivery-api/pagination
+ * 
+ * @param {string} params.collection 
+ * - The name of the DatoCMS collection. For example, `"Pages"`
+ * @param {DocumentNode|string} params.fragment 
+ * - The GraphQL fragment to include for each record, For example `pageRouteFragment`.
  */
 export const datocmsCollection = async <CollectionType>({
   collection,
   fragment
 }: {
-  collection: string,
-  fragment: string
+  collection: string;
+  fragment: string | DocumentNode;
 }) => {
-  const { meta } = await datocmsRequest({
+  const { 
+    meta, 
+    records: [{ __typename: type }] 
+  } = await datocmsRequest<CollectionInfo>({
     query: parse(/* graphql */`
       query ${collection}Meta {
+        records: all${collection}(first: 1) { __typename }
         meta: _all${collection}Meta { count }
       }
    `)
-  }) as { meta: CollectionMeta };
-
+  });
   const recordsPerPage = 100; // DatoCMS GraphQL API has a limit of 100 records per request
   const totalPages = Math.ceil(meta.count / recordsPerPage);
   const records: CollectionType[] = [];
-
+  const fragmentDocument = typeof fragment === 'string' 
+    ? parse(`fragment InlineFragment on ${type} { ${fragment} }`)
+    : fragment;
+  const { definitions } = fragmentDocument;
+  const fragmentDefinition = definitions.find(({ kind }) => kind === Kind.FRAGMENT_DEFINITION);
+  
   for (let page = 0; page < totalPages; page++) {
     const data = await datocmsRequest({
       query: parse(/* graphql */`
+        ${print(fragmentDocument)}
+        
         query All${collection} {
           ${collection}: all${collection} (
              first: ${recordsPerPage},
              skip: ${page * recordsPerPage}
           ) {
-            ${fragment}
+            ...${fragmentDefinition?.name?.value}
           }
         }
       `),

src/lib/routing/page.ts

@@ -1,11 +1,6 @@
 import type { PageRouteFragment, SiteLocale } from '@lib/datocms/types';
 import { getLocalizedSlug, getSlugFromPath, type MaybeSlug } from './lib/slug';
 
-export type PageRouteForPath =
-  & Pick<PageRouteFragment, '_allSlugLocales' | 'parentPage'>
-  & { parentPage?: PageRouteForPath | null };
-
-
 export function getParentPages(page: PageRouteFragment): PageRouteFragment[] {
   if (page.parentPage) {
     return [
@@ -27,9 +22,9 @@ export function getParentPages(page: PageRouteFragment): PageRouteFragment[] {
  * - ['grand-parent', 'parent-slug']  (grand parent and parent page available in given locale)
  * - ['grand-parent', undefined]      (grand parent page available, parent page not available in given locale)
  */
-export const getParentSlugs = ({ locale, page }: { locale?: SiteLocale, page: PageRouteForPath }): MaybeSlug[] => {
+export const getParentSlugs = ({ locale, page }: { locale?: SiteLocale, page: PageRouteFragment }): MaybeSlug[] => {
   if (page.parentPage) {
-    const slug = getLocalizedSlug<PageRouteForPath>({ locale, record: page.parentPage });
+    const slug = getLocalizedSlug<PageRouteFragment>({ locale, record: page.parentPage });
     return [
       ...getParentSlugs({ locale, page: page.parentPage }),
       slug
@@ -51,7 +46,7 @@ export const getParentSlugs = ({ locale, page }: { locale?: SiteLocale, page: Pa
  * - -/-/page-slug                        (missing parent and grand parent in given locale)
  * - -                                    (missing page in given locale)
  */
-export const getPagePath = ({ locale, page }: { locale?: SiteLocale, page: PageRouteForPath }) => {
+export const getPagePath = ({ locale, page }: { locale?: SiteLocale, page: PageRouteFragment }) => {
   const slug = getLocalizedSlug({ locale, record: page });
   const parentSlugs = getParentSlugs({ locale, page });
   return [...parentSlugs, slug].join('/');

src/pages/[locale]/[...path]/index.astro

@@ -2,12 +2,16 @@
 import { datocmsCollection, datocmsRequest } from '@lib/datocms';
 import { getPageHref } from '@lib/routing/';
 import {
-  type PageRouteForPath,
   getPagePath,
   getPageSlugFromPath,
   getParentPages,
 } from '@lib/routing/page';
-import type { PageQuery, SiteLocale } from '@lib/datocms/types';
+import { 
+  PageRoute as fragment, 
+  type PageQuery, 
+  type PageRouteFragment, 
+  type SiteLocale 
+} from '@lib/datocms/types';
 import type { PageUrl } from '@lib/seo';
 import Layout from '@layouts/Default.astro';
 import Blocks from '@blocks/Blocks.astro';
@@ -17,25 +21,10 @@ import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscrip
 import query from './_index.query.graphql';
 
 export async function getStaticPaths() {
-  const pages = await datocmsCollection<PageRouteForPath>({
+  const pages = await datocmsCollection<PageRouteFragment>({
     collection: 'Pages',
-    fragment: `
-      _allSlugLocales { locale, value }
-      parentPage {
-        _allSlugLocales { locale, value }
-        parentPage {
-          _allSlugLocales { locale, value }
-          parentPage {
-            _allSlugLocales { locale, value }
-            parentPage {
-              _allSlugLocales { locale, value }
-            }
-          }
-        }
-      }
-    `,
+    fragment,
   });
-
   return pages.flatMap((page) => {
     const locales = page._allSlugLocales
       ?.map((slug) => slug.locale)