Coder Social home page Coder Social logo

k-kozika / microcms-ts-sdk Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tsuki-lab/microcms-ts-sdk

0.0 0.0 0.0 554 KB

This package is a wrapper for "microcms-js-sdk". More type-safe.

Home Page: https://www.npmjs.com/package/microcms-ts-sdk

License: Apache License 2.0

JavaScript 10.91% TypeScript 89.09%

microcms-ts-sdk's Introduction

MicroCMS TypeScript SDK

This package is a wrapper for "microcms-js-sdk". More type-safe.

npm version License

Getting Started

install

install npm package.

npm i microcms-ts-sdk
# or
yarn add microcms-ts-sdk

How to use

Supported of "microcms-js-sdk".
For more information on how to use this service, please click here.

Type safe usage

import { createClient, MicroCMSSchemaInfer } from 'microcms-ts-sdk';

// Type definition
type Content = {
  text: string;
};

interface Endpoints {
  // API in list format.
  list: {
    contents: Content;
  };
  // API in object format
  object: {
    content: Content;
  };
}

// Initialize Client SDK.
const client = createClient<Endpoints>({
  serviceDomain: 'YOUR_DOMAIN', // YOUR_DOMAIN is the XXXX part of XXXX.microcms.io
  apiKey: 'YOUR_API_KEY'
});

// Schema type inference
type Schema = MicroCMSSchemaInfer<typeof client>;
/**
 * Schema[contents]
 * {
 *   id: string;
 *   createdAt: string;
 *   updatedAt: string;
 *   publishedAt?: string;
 *   revisedAt?: string;
 *   text: string;
 * }
 *
 * Schema[content]
 * {
 *   createdAt: string;
 *   updatedAt: string;
 *   publishedAt?: string;
 *   revisedAt?: string;
 *   text: string;
 * }
 */

It is also possible to use only type definitions for the original client. (Unsupported getAll method)

import { createClient } from 'microcms-js-sdk';
import { MicroCMSClient } from 'microcms-ts-sdk';

type Endpoints = {
  // definition
};

const client: MicroCMSClient<Endpoints> = createClient({
  serviceDomain: 'YOUR_DOMAIN',
  apiKey: 'YOUR_API_KEY'
});

Feature

Support endpoint specification.

// The "contents" will be complemented.
client.getList({ endpoint: 'contents' });

// Error: Not in list format endpoint.
client.getList({ endpoint: 'content' });

Support response types.

/**
 * // getList response type
 * {
 *  contents: {
 *    id: string;
 *    createdAt: string;
 *    updatedAt: string;
 *    publishedAt?: string;
 *    revisedAt?: string;
 *    text: string;
 *  }[];
 *  totalCount: number;
 *  limit: number;
 *  offset: number;
 * }
 */
client.getList({ endpoint: 'contents' });

/**
 * // Set options "queries.fields"
 * {
 *  contents: {
 *    id: string;
 *    publishedAt?: string;
 *    text: string;
 *  }[];
 *  totalCount: number;
 *  limit: number;
 *  offset: number;
 * }
 */
client.getList({
  endpoint: 'contents',
  queries: {
    fields: ['id', 'text', 'publishedAt'] // (keyof (Content & MicroCMSListContent))[]
  }
});

Support for all acquisitions.

/** Get all contents for endpoint */
client.getAll({
  endpoint: 'contents'
});

Support relation schema.
https://document.microcms.io/manual/api-model-settings#h9c184228ff

import { MicroCMSRelation } from 'microcms-ts-sdk';

type Writer = {
  name: string;
};

type Post = {
  title: string;
  writer: MicroCMSRelation<Writer>;
  relatedPosts: MicroCMSRelation<Post>[];
};

// endpoint name `posts` API type List for `Post`
client
  .getListDetail({
    endpoint: 'posts',
    contentId: 'xxxx',
    queries: {
      depth: 1 // 1 <= default | https://document.microcms.io/content-api/get-list-contents#h30fce9c966
    }
  })
  .then((res) => console.log(res));
/**
 * {
 *   id: string;
 *   createdAt: string;
 *   updatedAt: string;
 *   publishedAt?: string;
 *   revisedAt?: string;
 *   title: string;
 *   writer: {
 *     id: string;
 *     createdAt: string;
 *     updatedAt: string;
 *     publishedAt?: string;
 *     revisedAt?: string;
 *     name: string;
 *   }
 *   relatedPosts: {
 *     id: string;
 *     createdAt: string;
 *     updatedAt: string;
 *     publishedAt?: string;
 *     revisedAt?: string;
 *     title: string;
 *     writer: {
 *       id: string;
 *     }
 *     relatedPosts: {
 *       id: string;
 *     }
 *   }[]
 * }
 */

// get individual schema of depth.
type MicroCMSSchema = MicroCMSSchemaInfer<typeof client>;
type PostDetailDepth2 = MicroCMSDepthInfer<MicroCMSSchema['posts'], 2>; // depth: 2
/**
 * {
 *   id: string;
 *   createdAt: string;
 *   updatedAt: string;
 *   publishedAt?: string;
 *   revisedAt?: string;
 *   title: string;
 *   writer: {
 *     id: string;
 *     createdAt: string;
 *     updatedAt: string;
 *     publishedAt?: string;
 *     revisedAt?: string;
 *     name: string;
 *   }
 *   relatedPosts: {
 *     id: string;
 *     createdAt: string;
 *     updatedAt: string;
 *     publishedAt?: string;
 *     revisedAt?: string;
 *     title: string;
 *     writer: {
 *       id: string;
 *       createdAt: string;
 *       updatedAt: string;
 *       publishedAt?: string;
 *       revisedAt?: string;
 *       name: string;
 *     }
 *     relatedPosts: {
 *       id: string;
 *       createdAt: string;
 *       updatedAt: string;
 *       publishedAt?: string;
 *       revisedAt?: string;
 *       title: string;
 *       writer: {
 *         id: string;
 *       }
 *       relatedPosts: {
 *         id: string;
 *       }[]
 *     }[]
 *   }[]
 * }
 */

// microCMS POST method API
client.create({
  endpoint: 'posts',
  content: {
    title: 'example',
    writer: '< WRITER_CONTENT_ID >', // type-safe
    relatedPosts: ['< POST_CONTENT_ID >'] // type-safe
  }
});

LICENSE

Apache-2.0

microcms-ts-sdk's People

Contributors

cm-ayf avatar dependabot[bot] avatar itoudium avatar k-kozika avatar tsuki-lab avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.