Package Exports

@sanity-typed/client-mock
@sanity-typed/client-mock/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@sanity-typed/client-mock) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@sanity-typed/client-mock

Mock @sanity-typed/client for local development and testing

Install

npm install sanity @sanity-typed/client-mock

Usage

Use createClient instead of the createClient from @sanity-typed/client and include initial documents.

product.ts:

// import { defineArrayMember, defineField, defineType } from "sanity";
import {
  defineArrayMember,
  defineField,
  defineType,
} from "@sanity-typed/types";

/** No changes using defineType, defineField, and defineArrayMember */
export const product = defineType({
  name: "product",
  type: "document",
  title: "Product",
  fields: [
    defineField({
      name: "productName",
      type: "string",
      title: "Product name",
    }),
    defineField({
      name: "tags",
      type: "array",
      title: "Tags for item",
      of: [
        defineArrayMember({
          type: "object",
          name: "tag",
          fields: [
            defineField({ type: "string", name: "label" }),
            defineField({ type: "string", name: "value" }),
          ],
        }),
      ],
    }),
  ],
});

sanity.config.ts:

import { visionTool } from "@sanity/vision";
import { deskTool } from "sanity/desk";

// import { defineConfig } from "sanity";
import { defineConfig } from "@sanity-typed/types";
import type { InferSchemaValues } from "@sanity-typed/types";

import { product } from "./schemas/product";

/** No changes using defineConfig */
const config = defineConfig({
  projectId: "59t1ed5o",
  dataset: "production",
  plugins: [deskTool(), visionTool()],
  schema: {
    types: [
      product,
      // ...
    ],
  },
});

export default config;

/** Typescript type of all types! */
export type SanityValues = InferSchemaValues<typeof config>;
/**
 *  SanityValues === {
 *    product: {
 *      _createdAt: string;
 *      _id: string;
 *      _rev: string;
 *      _type: "product";
 *      _updatedAt: string;
 *      productName?: string;
 *      tags?: {
 *        _key: string;
 *        _type: "tag";
 *        label?: string;
 *        value?: string;
 *      }[];
 *    };
 *    // ... all your types!
 *  }
 */

your-super-cool-mocked-application.ts:

// import { createClient } from "@sanity-typed/client";
import { createClient } from "@sanity-typed/client-mock";

import type { SanityValues } from "./sanity.config";

// const client = createClient({
const client = createClient<SanityValues>({
  dataset: [
    {
      _createdAt: "2011-12-15T03:57:59.213Z",
      _id: "9bd9d8d6-9a67-44e0-af46-7cc8796ed151",
      _rev: "1mPXM8RRYtNNswMG7IDA8x",
      _type: "product",
      _updatedAt: "2029-01-01T06:23:59.079Z",
      productName: "Deduco tyrannus v",
      tags: [
        {
          _key: "4d8edf97d9df21feee3472a6",
          _type: "tag",
          label: "Cuppedi",
          value: "Defleo bis min",
        },
        {
          _key: "fec59aa5d372ee63b4e8ec02",
          _type: "tag",
          label: "Communis molestiae a",
          value: "Solitud",
        },
        {
          _key: "a0096f276a2f6d9e14fccd5b",
          _type: "tag",
          label: "Speculum alo v",
        },
        {
          _key: "c803ec5fa6f95ac8ddce4dee",
          _type: "tag",
          label: "Aliquid",
          value: "Turba c",
        },
      ],
    },
    // ...
  ],
})({
  projectId: "your-project-id",
  dataset: "your-dataset-name",
  useCdn: true,
  apiVersion: "2023-05-23",
});

const data = await client.fetch('*[_type=="product"]{productName,tags}');
/**
 *  typeof data === [
 *    {
 *      productName: "Deduco tyrannus v",
 *      tags: [
 *        {
 *          _key: "4d8edf97d9df21feee3472a6",
 *          _type: "tag",
 *          label: "Cuppedi",
 *          value: "Defleo bis min",
 *        },
 *        {
 *          _key: "fec59aa5d372ee63b4e8ec02",
 *          _type: "tag",
 *          label: "Communis molestiae a",
 *          value: "Solitud",
 *        },
 *        {
 *          _key: "a0096f276a2f6d9e14fccd5b",
 *          _type: "tag",
 *          label: "Speculum alo v",
 *        },
 *        {
 *          _key: "c803ec5fa6f95ac8ddce4dee",
 *          _type: "tag",
 *          label: "Aliquid",
 *          value: "Turba c",
 *        },
 *      ],
 *    },
 *  ]
 */

Depending on your tree-shaking setup, you'll want to swap between the real client and the mock client. Additionally, using @sanity-typed/faker along with the mock client can be a great way to generate fake data.

your-super-cool-fully-mocked-application.ts:

import { base, en } from "@faker-js/faker";

import { createClient } from "@sanity-typed/client";
import { createClient as createClientMock } from "@sanity-typed/client-mock";
import { sanityConfigToFaker } from "@sanity-typed/faker";

import { config } from "./sanity.config";
import type { SanityValues } from "./sanity.config";

const createMockClient = () => {
  const sanityFaker = sanityConfigToFaker(config, {
    faker: { locale: [en, base] },
  });

  return createClientMock<SanityValues>({
    dataset: [
      sanityFaker.product(),
      sanityFaker.product(),
      sanityFaker.product(),
      sanityFaker.product(),
      sanityFaker.product(),
    ],
  });
};

const client = (
  process.env.DETECT_PRODUCTION_SOMEHOW
    ? createClient<SanityValues>()
    : createMockClient()
)({
  projectId: "your-project-id",
  dataset: "your-dataset-name",
  useCdn: true,
  apiVersion: "2023-05-23",
});

const data = await client.fetch('*[_type=="product"]{productName,tags}');

Considerations

Config in Runtime

@sanity-typed/* generally has the goal of only having effect to types and no runtime effects. This package is an exception. This means that you will have to import your sanity config to use this. While sanity v3 is better than v2 at having a standard build environment, you will have to handle any nuances, including having a much larger build.

Alternatives

fake-sanity-client