feat: type Rich Text and Title fields with custom PrismicStructuredTe…

…xt scalar (#473)
prismicio · Nov 5, 2021 · 5737479 · 5737479
1 parent e8f52c2
commit 5737479
Show file tree

Hide file tree

Showing 8 changed files with 1,193 additions and 999 deletions.
diff --git a/packages/gatsby-source-prismic/src/buildDependencies.ts b/packages/gatsby-source-prismic/src/buildDependencies.ts
@@ -61,6 +61,7 @@ export const buildDependencies = async (
 		buildObjectType: gatsbyContext.schema.buildObjectType,
 		buildEnumType: gatsbyContext.schema.buildEnumType,
 		buildInterfaceType: gatsbyContext.schema.buildInterfaceType,
+		buildScalarType: gatsbyContext.schema.buildScalarType,
 		getNode: gatsbyContext.getNode,
 		getNodes: gatsbyContext.getNodes,
 		schema: gatsbyContext.schema,

diff --git a/packages/gatsby-source-prismic/src/builders/buildStructuredTextType.ts b/packages/gatsby-source-prismic/src/builders/buildStructuredTextType.ts
@@ -7,6 +7,9 @@ import { pipe, identity } from "fp-ts/function";
 import { buildObjectType } from "../lib/buildObjectType";
 
 import { Dependencies } from "../types";
+import { buildScalarType } from "../lib/buildScalarType";
+import { requiredTypeName } from "../lib/requiredTypeName";
+import { createType } from "../lib/createType";
 
 /**
  * Builds a GraphQL Type used by StructuredText fields. The resulting type can
@@ -19,9 +22,17 @@ export const buildStructuredTextType: RTE.ReaderTaskEither<
 	gatsby.GatsbyGraphQLType
 > = pipe(
 	RTE.ask<Dependencies>(),
-	RTE.chain((deps) =>
+	RTE.bind("structuredTextScalar", (deps) =>
+		buildScalarType({
+			name: deps.globalNodeHelpers.createTypeName("StructuredText"),
+			description:
+				"Text content with rich formatting capabilities using a Prismic format called Structured Text.",
+		}),
+	),
+	RTE.chainFirst((scope) => createType(scope.structuredTextScalar)),
+	RTE.chain((scope) =>
 		buildObjectType({
-			name: deps.nodeHelpers.createTypeName("StructuredTextType"),
+			name: scope.nodeHelpers.createTypeName("StructuredTextType"),
 			fields: {
 				text: {
 					type: "String",
@@ -32,13 +43,16 @@ export const buildStructuredTextType: RTE.ReaderTaskEither<
 					resolve: (source: prismicT.RichTextField) =>
 						prismicH.asHTML(
 							source,
-							deps.pluginOptions.linkResolver,
-							deps.pluginOptions.htmlSerializer,
+							scope.pluginOptions.linkResolver,
+							scope.pluginOptions.htmlSerializer,
 						),
 				},
-				richText: { type: "JSON", resolve: identity },
+				richText: {
+					type: requiredTypeName(scope.structuredTextScalar.config.name),
+					resolve: identity,
+				},
 				raw: {
-					type: "JSON",
+					type: requiredTypeName(scope.structuredTextScalar.config.name),
 					resolve: identity,
 					deprecationReason:
 						"This field has been renamed to `richText`. The `richText` field has the same value the `raw` field.",

diff --git a/packages/gatsby-source-prismic/src/lib/buildScalarType.ts b/packages/gatsby-source-prismic/src/lib/buildScalarType.ts
@@ -0,0 +1,17 @@
+import * as gatsby from "gatsby";
+import * as gqlc from "graphql-compose";
+import * as RTE from "fp-ts/ReaderTaskEither";
+
+import { Dependencies } from "../types";
+
+/**
+ * Builds a GraphQL scalar type using the environment's `buildScalarType` function.
+ *
+ * @param config - Configuration for the scalar type.
+ *
+ * @returns Return value of the environment's `buildScalarType` function.
+ */
+export const buildScalarType = (
+	config: gqlc.ScalarTypeComposerAsObjectDefinition,
+): RTE.ReaderTaskEither<Dependencies, never, gatsby.GatsbyGraphQLScalarType> =>
+	RTE.asks((deps) => deps.buildScalarType(config));
diff --git a/packages/gatsby-source-prismic/src/runtime/normalizers/image.ts b/packages/gatsby-source-prismic/src/runtime/normalizers/image.ts
@@ -173,7 +173,7 @@ export const image = <Value extends prismicT.ImageField>(
 	for (const thumbnailName of thumbnailNames) {
 		result.thumbnails[thumbnailName as keyof typeof result.thumbnails] =
 			buildImageField({
-				value: config.value[thumbnailName],
+				value: config.value[thumbnailName as keyof typeof config.value],
 				imageImgixParams: config.imageImgixParams,
 				imagePlaceholderImgixParams: config.imagePlaceholderImgixParams,
 			});

diff --git a/packages/gatsby-source-prismic/src/types.ts b/packages/gatsby-source-prismic/src/types.ts
@@ -61,6 +61,7 @@ export interface Dependencies {
 	buildObjectType: gatsby.NodePluginSchema["buildObjectType"];
 	buildUnionType: gatsby.NodePluginSchema["buildUnionType"];
 	buildEnumType: gatsby.NodePluginSchema["buildEnumType"];
+	buildScalarType: gatsby.NodePluginSchema["buildScalarType"];
 	buildInterfaceType: gatsby.NodePluginSchema["buildInterfaceType"];
 	getNode: gatsby.SourceNodesArgs["getNode"];
 	getNodes: gatsby.SourceNodesArgs["getNodes"];

diff --git a/packages/gatsby-source-prismic/test/__testutils__/createGatsbyContext.ts b/packages/gatsby-source-prismic/test/__testutils__/createGatsbyContext.ts
@@ -61,6 +61,10 @@ export const createGatsbyContext = (): PartialDeep<gatsby.NodePluginArgs> & {
 				kind: "INPUT_OBJECT",
 				config,
 			})),
+			buildScalarType: sinon.stub().callsFake((config) => ({
+				kind: "SCALAR",
+				config,
+			})),
 		},
 		getNode: sinon.stub().callsFake((id: string) => nodeStore.get(id)),
 		getNodes: sinon.stub().callsFake(() => [...nodeStore.values()]),

diff --git a/packages/gatsby-source-prismic/test/create-schema-customization-structured-text.test.ts b/packages/gatsby-source-prismic/test/create-schema-customization-structured-text.test.ts
@@ -35,11 +35,11 @@ test("creates base type", async (t) => {
 						resolve: sinon.match.func,
 					}),
 					richText: sinon.match({
-						type: "JSON",
+						type: "PrismicStructuredText!",
 						resolve: sinon.match.func,
 					}),
 					raw: sinon.match({
-						type: "JSON",
+						type: "PrismicStructuredText!",
 						resolve: sinon.match.func,
 					}),
 				},

diff --git a/yarn.lock b/yarn.lock