Use basic scalar for JSONString

codegen.yml

@@ -16,7 +16,8 @@ generates:
       - "typescript-apollo-client-helpers"
     config:
       scalars:
-        JSONString: Scalar.JSONString
+        JSONString: string
+        # SampleScalar: Scalar.SampleScalar
       dedupeOperationSuffix: true # Prevent suffix duplication in generated names
   ./graphql.schema.json:
     plugins:

components/checkout/stripe/StripeCreditCardSection.tsx

@@ -126,7 +126,7 @@ const StripeCardForm: React.VFC<StripeCardFormInterface> = ({
     if (completeData?.checkoutComplete?.confirmationNeeded) {
       // Parse data for the Stripe
       const confirmationData = JSON.parse(
-        completeData?.checkoutComplete?.confirmationData
+        completeData?.checkoutComplete?.confirmationData || ""
       );
 
       // Execute additional action at Stripe

lib/typePolicies.ts

@@ -5,15 +5,6 @@ import { TypedTypePolicies } from "@/saleor/api";
 import { formatAsMoney } from "./util";
 
 export const typePolicies: TypedTypePolicies = {
-  Product: {
-    fields: {
-      description: {
-        read(data) {
-          return JSON.parse(data);
-        },
-      },
-    },
-  },
   Money: {
     fields: {
       localizedAmount: {

pages/cart.tsx

@@ -105,7 +105,7 @@ const Cart: React.VFC = ({}) => {
                                 </div>
 
                                 <p className="text-xl text-gray-900 text-right">
-                                  {price.localizedAmount}
+                                  {price?.localizedAmount}
                                 </p>
                               </div>
                             </div>

pages/products/[slug].tsx

@@ -90,10 +90,10 @@ const ProductPage: React.VFC<InferGetStaticPropsType<typeof getStaticProps>> =
 
                 <p className="text-2xl text-gray-900">{price}</p>
 
-                {!!product?.description && (
+                {product?.description && (
                   <div className="text-base text-gray-700 space-y-6">
                     <article className="prose lg:prose-s">
-                      <Blocks data={product?.description} />
+                      <Blocks data={JSON.parse(product.description)} />
                     </article>
                   </div>
                 )}

saleor/api.tsx

@@ -39,7 +39,7 @@ export type Scalars = {
    * Use of this type is *not recommended* as you lose the benefits of having a defined, static
    * schema (one of the key benefits of GraphQL).
    */
-  JSONString: Scalar.JSONString;
+  JSONString: string;
   /**
    * Positive Decimal scalar implementation.
    *
@@ -12661,7 +12661,7 @@ export type CheckoutCompleteMutationVariables = Exact<{
 }>;
 
 
-export type CheckoutCompleteMutation = { __typename?: 'Mutation', checkoutComplete?: Maybe<{ __typename?: 'CheckoutComplete', confirmationNeeded: boolean, confirmationData?: Maybe<Scalar.JSONString>, order?: Maybe<{ __typename?: 'Order', id: string, status: OrderStatus, token: string }>, errors: Array<{ __typename?: 'CheckoutError', field?: Maybe<string>, message?: Maybe<string>, variants?: Maybe<Array<string>>, addressType?: Maybe<AddressTypeEnum> }> }> };
+export type CheckoutCompleteMutation = { __typename?: 'Mutation', checkoutComplete?: Maybe<{ __typename?: 'CheckoutComplete', confirmationNeeded: boolean, confirmationData?: Maybe<string>, order?: Maybe<{ __typename?: 'Order', id: string, status: OrderStatus, token: string }>, errors: Array<{ __typename?: 'CheckoutError', field?: Maybe<string>, message?: Maybe<string>, variants?: Maybe<Array<string>>, addressType?: Maybe<AddressTypeEnum> }> }> };
 
 export type RemoveProductFromCheckoutMutationVariables = Exact<{
   checkoutToken: Scalars['UUID'];
@@ -12691,14 +12691,14 @@ export type CheckoutByTokenQueryVariables = Exact<{
 
 export type CheckoutByTokenQuery = { __typename?: 'Query', checkout?: Maybe<{ __typename?: 'Checkout', id: string, token: any, email: string, isShippingRequired: boolean, billingAddress?: Maybe<{ __typename?: 'Address', phone?: Maybe<string>, firstName: string, lastName: string, streetAddress1: string, city: string, postalCode: string, country: { __typename?: 'CountryDisplay', code: string, country: string } }>, shippingAddress?: Maybe<{ __typename?: 'Address', phone?: Maybe<string>, firstName: string, lastName: string, streetAddress1: string, city: string, postalCode: string, country: { __typename?: 'CountryDisplay', code: string, country: string } }>, shippingMethod?: Maybe<{ __typename?: 'ShippingMethod', id: string, name: string, minimumDeliveryDays?: Maybe<number>, maximumDeliveryDays?: Maybe<number>, price?: Maybe<{ __typename?: 'Money', currency: string, amount: number, localizedAmount: string }> }>, availableShippingMethods: Array<Maybe<{ __typename?: 'ShippingMethod', id: string, name: string, minimumDeliveryDays?: Maybe<number>, maximumDeliveryDays?: Maybe<number>, price?: Maybe<{ __typename?: 'Money', currency: string, amount: number, localizedAmount: string }> }>>, availablePaymentGateways: Array<{ __typename?: 'PaymentGateway', id: string, name: string, config: Array<{ __typename?: 'GatewayConfigLine', field: string, value?: Maybe<string> }> }>, lines?: Maybe<Array<Maybe<{ __typename?: 'CheckoutLine', id: string, totalPrice?: Maybe<{ __typename?: 'TaxedMoney', gross: { __typename?: 'Money', currency: string, amount: number, localizedAmount: string } }>, variant: { __typename?: 'ProductVariant', name: string, product: { __typename?: 'Product', id: string, name: string, slug: string, thumbnail?: Maybe<{ __typename?: 'Image', url: string, alt?: Maybe<string> }> }, pricing?: Maybe<{ __typename?: 'VariantPricingInfo', price?: Maybe<{ __typename?: 'TaxedMoney', gross: { __typename?: 'Money', currency: string, amount: number, localizedAmount: string } }> }> } }>>>, subtotalPrice?: Maybe<{ __typename?: 'TaxedMoney', net: { __typename?: 'Money', currency: string, amount: number, localizedAmount: string }, tax: { __typename?: 'Money', currency: string, amount: number, localizedAmount: string } }>, shippingPrice?: Maybe<{ __typename?: 'TaxedMoney', gross: { __typename?: 'Money', currency: string, amount: number, localizedAmount: string } }>, totalPrice?: Maybe<{ __typename?: 'TaxedMoney', gross: { __typename?: 'Money', currency: string, amount: number, localizedAmount: string } }> }> };
 
-export type ProductDetailsFragment = { __typename?: 'Product', id: string, name: string, description?: Maybe<Scalar.JSONString>, seoDescription?: Maybe<string>, seoTitle?: Maybe<string>, category?: Maybe<{ __typename?: 'Category', name: string }>, variants?: Maybe<Array<Maybe<{ __typename?: 'ProductVariant', id: string, name: string }>>>, pricing?: Maybe<{ __typename?: 'ProductPricingInfo', priceRange?: Maybe<{ __typename?: 'TaxedMoneyRange', start?: Maybe<{ __typename?: 'TaxedMoney', gross: { __typename?: 'Money', currency: string, amount: number, localizedAmount: string } }> }> }>, media?: Maybe<Array<{ __typename?: 'ProductMedia', url: string, alt: string, type: ProductMediaType }>>, thumbnail?: Maybe<{ __typename?: 'Image', url: string, alt?: Maybe<string> }> };
+export type ProductDetailsFragment = { __typename?: 'Product', id: string, name: string, description?: Maybe<string>, seoDescription?: Maybe<string>, seoTitle?: Maybe<string>, category?: Maybe<{ __typename?: 'Category', name: string }>, variants?: Maybe<Array<Maybe<{ __typename?: 'ProductVariant', id: string, name: string }>>>, pricing?: Maybe<{ __typename?: 'ProductPricingInfo', priceRange?: Maybe<{ __typename?: 'TaxedMoneyRange', start?: Maybe<{ __typename?: 'TaxedMoney', gross: { __typename?: 'Money', currency: string, amount: number, localizedAmount: string } }> }> }>, media?: Maybe<Array<{ __typename?: 'ProductMedia', url: string, alt: string, type: ProductMediaType }>>, thumbnail?: Maybe<{ __typename?: 'Image', url: string, alt?: Maybe<string> }> };
 
 export type ProductBySlugQueryVariables = Exact<{
   slug: Scalars['String'];
 }>;
 
 
-export type ProductBySlugQuery = { __typename?: 'Query', product?: Maybe<{ __typename?: 'Product', id: string, name: string, description?: Maybe<Scalar.JSONString>, seoDescription?: Maybe<string>, seoTitle?: Maybe<string>, category?: Maybe<{ __typename?: 'Category', name: string }>, variants?: Maybe<Array<Maybe<{ __typename?: 'ProductVariant', id: string, name: string }>>>, pricing?: Maybe<{ __typename?: 'ProductPricingInfo', priceRange?: Maybe<{ __typename?: 'TaxedMoneyRange', start?: Maybe<{ __typename?: 'TaxedMoney', gross: { __typename?: 'Money', currency: string, amount: number, localizedAmount: string } }> }> }>, media?: Maybe<Array<{ __typename?: 'ProductMedia', url: string, alt: string, type: ProductMediaType }>>, thumbnail?: Maybe<{ __typename?: 'Image', url: string, alt?: Maybe<string> }> }> };
+export type ProductBySlugQuery = { __typename?: 'Query', product?: Maybe<{ __typename?: 'Product', id: string, name: string, description?: Maybe<string>, seoDescription?: Maybe<string>, seoTitle?: Maybe<string>, category?: Maybe<{ __typename?: 'Category', name: string }>, variants?: Maybe<Array<Maybe<{ __typename?: 'ProductVariant', id: string, name: string }>>>, pricing?: Maybe<{ __typename?: 'ProductPricingInfo', priceRange?: Maybe<{ __typename?: 'TaxedMoneyRange', start?: Maybe<{ __typename?: 'TaxedMoney', gross: { __typename?: 'Money', currency: string, amount: number, localizedAmount: string } }> }> }>, media?: Maybe<Array<{ __typename?: 'ProductMedia', url: string, alt: string, type: ProductMediaType }>>, thumbnail?: Maybe<{ __typename?: 'Image', url: string, alt?: Maybe<string> }> }> };
 
 export type ProductPathsQueryVariables = Exact<{
   after?: Maybe<Scalars['String']>;

scalars.ts

@@ -1,3 +1,3 @@
-import { DataProp } from "editorjs-blocks-react-renderer";
+// custom scalars
 
-export type JSONString = DataProp;
+export type SampleScalar = { sample: string; scalar: number };