feat: use getStaticPaths with PageRouteFragment #253

jurgenbelien · 2025-03-08T10:13:44Z

Changes

Create reusable lib for getting localized slug
Combine nesting PageRoute fragments in one file
Remove option to dedupe grapqhl fragments (so that they can be imported)
Support passing a fragment directly into the datocmsCollection for better typed getStaticPaths

How to test

Open preview link
Navigate to documentation
Drill down in documentation
Verify that all pages work
Inspect the pipeline
See that it passes
Try it out with a new route

Checklist

I have performed a self-review of my own code
I have made sure that my PR is easy to review (not too big, includes comments)
~~I have made updated relevant documentation files (in project README, docs/, etc)~~
~~I have added a decision log entry if the change affects the architecture or changes a significant technology~~
I have notified a reviewer

cloudflare-workers-and-pages · 2025-03-08T15:37:41Z

Deploying head-start with Cloudflare Pages

Latest commit:	`cf7bdbb`
Status:	✅ Deploy successful!
Preview URL:	https://2a65d321.head-start.pages.dev
Branch Preview URL:	https://refactor-static-paths.head-start.pages.dev

View logs

jurgenbelien · 2025-03-08T15:52:23Z

.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,


This was all that was necessary to be able to import full fragments into the datocmsCollection from @lib/datocms/types.ts. After npm run prep, that file will have all fragments used in the project as template strings, with all their nested fragments injected, ie:

export const PageRoute = gql` fragment PageRoute on PageRecord { ...PageRouteFields ...PageRouteParent } ${PageRouteFields} ${PageRouteParent}`;

(note that I cleaned up the indentation)

jurgenbelien · 2025-03-08T15:54:20Z

src/env.d.ts

+declare module '*.fragment.graphql' {
+  import { DocumentNode } from 'graphql';
+  const value: DocumentNode;
+  export default value;
+}


This allows for importing the fragments into code. Note the difference in export statement between *.query.graphql and *.fragment.graphql.

jurgenbelien · 2025-03-08T15:55:06Z

src/lib/datocms/index.ts

    query: parse(/* graphql */`
      query ${collection}Meta {
+        records: all${collection}(first: 1) { __typename }


In order to get the right __typename, fetch one record from the collection.

jurgenbelien · 2025-03-08T16:05:28Z

src/lib/datocms/index.ts

+    : fragment;
+  const { definitions } = fragmentDocument;
+  const fragmentDefinition = definitions
+    .find((definition): definition is FragmentDefinitionNode =>


For explanation of is, see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates

jurgenbelien · 2025-03-08T16:05:55Z

src/lib/datocms/index.ts

  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} }`)


Create new fragment to maintain support for passing a string to argument fragment

jurgenbelien · 2025-03-08T16:07:06Z

src/lib/datocms/index.ts


  for (let page = 0; page < totalPages; page++) {
    const data = await datocmsRequest({
      query: parse(/* graphql */`
+        ${print(fragmentDocument)}


Insert fragment definition from fragmentDocument, which is either the fragment passed from an import from @lib/datocms/types.ts or the one created from a string;

jurgenbelien · 2025-03-08T16:07:17Z

src/lib/datocms/index.ts

        query All${collection} {
          ${collection}: all${collection} (
             first: ${recordsPerPage},
             skip: ${page * recordsPerPage}
          ) {
-            ${fragment}
+            ...${fragmentDefinition?.name?.value}


use said fragment

jurgenbelien · 2025-03-08T16:08:04Z

src/lib/datocms/tests/datocmsCollection.test.ts

@@ -29,36 +30,60 @@ afterEach(() => {
 afterAll(() => server.close());

 describe('datocmsCollection:', () => {
-  test('should successfully fetch a non-paginated collection', async () => {
+  const fragment = parse(/* graphql */`


Test all functions with passing a parsed fragment by default

jurgenbelien · 2025-03-08T16:08:29Z

src/lib/datocms/tests/datocmsCollection.test.ts

+    }
+  `);
+
+  test('supports passing fragment as a string', async () => {


Test if passing a string keeps working

jurgenbelien · 2025-03-08T16:09:14Z

src/lib/datocms/tests/datocmsCollection.test.ts

+      data: {
+        meta: { count: totalRecords },
+        records: [{ __typename: 'MyMockRecord' }],
+      } satisfies CollectionInfo,        


Make sure the payload for the mocked service is the same type as the expected return value

jurgenbelien · 2025-03-08T16:11:40Z

src/lib/routing/lib/slug.test.ts

+const pageSlugs = {
+  en: 'example-page',
+  nl: 'voorbeeld-pagina'
+} as Record<string, string> as Record<SiteLocale, string>;


Make sure that this test scenario works, even when the SiteLocale definition generated from a DatoCMS instance might have completely different locales

jurgenbelien · 2025-03-08T16:12:40Z

src/lib/routing/lib/slug.ts

+type LocalizedSlugs = {
+  _allSlugLocales?:
+    | {
+        locale?: SiteLocale | null;
+        value?: string;
+      }[]
+    | null;
+};


A lot of null and undefined in here, but it is important that these definitions have an exact overlap with types from DatoCMS.

jurgenbelien · 2025-03-08T16:14:11Z

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

-        }
-      }
-    `,
+    fragment,


Congratulations to getting to the end. This is the actual feature!

jurgenbelien added 2 commits March 7, 2025 16:52

refactor(routing): reusable localized slug getter

c77e154

refactor(routing): single file for all PageRoute fragments

1118856

jurgenbelien force-pushed the refactor/static-paths branch from 7640530 to d429258 Compare March 8, 2025 15:37

jurgenbelien commented Mar 8, 2025

View reviewed changes

feat(datocms): load collection with route fragment definitions

cf7bdbb

jurgenbelien force-pushed the refactor/static-paths branch from d429258 to cf7bdbb Compare March 8, 2025 15:57

jurgenbelien commented Mar 8, 2025

View reviewed changes

jurgenbelien changed the title ~~refactor: use getStaticPaths with PageRouteFragment~~ feat: use getStaticPaths with PageRouteFragment Mar 8, 2025

jurgenbelien requested review from jbmoelker and decrek March 8, 2025 16:15

jurgenbelien marked this pull request as ready for review March 8, 2025 16:16

jurgenbelien requested a review from sjoerdbeentjes March 14, 2025 13:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: use getStaticPaths with PageRouteFragment #253

feat: use getStaticPaths with PageRouteFragment #253

jurgenbelien commented Mar 8, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Mar 8, 2025 •

edited

Loading

jurgenbelien Mar 8, 2025 •

edited

Loading

jurgenbelien Mar 8, 2025 •

edited

Loading

jurgenbelien Mar 8, 2025

jurgenbelien Mar 8, 2025

jurgenbelien Mar 8, 2025

jurgenbelien Mar 8, 2025

jurgenbelien Mar 8, 2025

jurgenbelien Mar 8, 2025

jurgenbelien Mar 8, 2025

jurgenbelien Mar 8, 2025

jurgenbelien Mar 8, 2025

jurgenbelien Mar 8, 2025 •

edited

Loading

jurgenbelien Mar 8, 2025 •

edited

Loading

feat: use getStaticPaths with PageRouteFragment #253

Are you sure you want to change the base?

feat: use getStaticPaths with PageRouteFragment #253

Conversation

jurgenbelien commented Mar 8, 2025 • edited Loading

Changes

How to test

Checklist

cloudflare-workers-and-pages bot commented Mar 8, 2025 • edited Loading

Deploying head-start with Cloudflare Pages

jurgenbelien Mar 8, 2025 • edited Loading

Choose a reason for hiding this comment

jurgenbelien Mar 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jurgenbelien Mar 8, 2025 • edited Loading

Choose a reason for hiding this comment

jurgenbelien Mar 8, 2025 • edited Loading

Choose a reason for hiding this comment

jurgenbelien commented Mar 8, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Mar 8, 2025 •

edited

Loading

jurgenbelien Mar 8, 2025 •

edited

Loading

jurgenbelien Mar 8, 2025 •

edited

Loading

jurgenbelien Mar 8, 2025 •

edited

Loading

jurgenbelien Mar 8, 2025 •

edited

Loading