Giter VIP home page Giter VIP logo

microcms-js-sdk's People

Contributors

4geru avatar amotarao avatar dc7290 avatar himorishige avatar hiro08gh avatar kazuhe avatar mottox2 avatar shibe97 avatar sinhalite avatar tsuki-lab avatar uc4w6c avatar yassh avatar youheinozaki avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

microcms-js-sdk's Issues

MicroCMSDate型のpublishedAtとrevisedAtはオプショナルプロパティであるべきである

現状、MicroCMSDate型は次の定義になっています。

export interface MicroCMSDate {
    createdAt: string;
    updatedAt: string;
    publishedAt: string;
    revisedAt: string;
}

しかし、一度も公開していないコンテンツにはpublishedAtrevisedAtは存在しないので、次の定義であるべきだと思います。

export interface MicroCMSDate {
    createdAt: string;
    updatedAt: string;
    publishedAt?: string;
    revisedAt?: string;
}

型定義の見直し

型定義の見直しを行っています。

型定義に関して、ご意見やバグフィックス等ありましたらコメント頂けると助かります。

通信失敗時のリトライ処理が行われない

SDKにリトライオプションがないためNext.jsなどでビルドを行う際にビルド全体が停止してしまうか一部のデータが不足してしまう可能性が高いです。
クライアント側でリトライ処理を書けば良いのですが、毎回その実装を行うのは手間がかかります。

提案

インタフェース提案を行いますがこの通りでなくても構いません。

  • client 生成時にデフォルトのリトライ設定ができる
//例
const client = createClient({
  serviceDomain: "YOUR_DOMAIN", // YOUR_DOMAIN is the XXXX part of XXXX.microcms.io
  apiKey: "YOUR_API_KEY",
  retry: true, //新しいパラメータ
});
  • getなどリクエスト実行時にリトライ設定ができる
//例
client
  .get({
    endpoint: 'endpoint',
    queries: { limit: 20, filters: 'createdAt[greater_than]2021' },
    retry: true, //新しいパラメータ
  })

考慮事項

  • 実際にはAPIが返却するレスポンスステータスを見てリトライするかを判別する必要がありそうです。
Transient errors (HTTP status codes 400, 408, 500, 502, 503, and 504) and throttling errors (HTTP status codes 400, 403, 429, 502, 503, and 509) can all be retried.
  • リトライの実装に関しては ExponentialBackoff を行うなどmicroCMSの制限事項に沿うための実装を行う必要があると考えます。

createClientの戻り値の型定義

こちらのSDKを使わせていただいてTypeScriptで実装をしているのですが、createClient メソッド の戻り値の型定義がないので扱いづらく困っております。
取り急ぎ下記の MicroCmsClientInterface のように自前で定義しています。(自分がTypeScriptに精通していないので知らないだけかもしれませんが、SDKの定義をうまいこと流用したりできるのでしょうか...?)

type MicroCmsClientInterface = {
  get: <T = any>({
    endpoint,
    contentId,
    queries,
    customRequestInit,
  }: GetRequest) => Promise<T>
  getList: <T_1 = any>({
    endpoint,
    queries,
    customRequestInit,
  }: GetListRequest) => Promise<MicroCMSListResponse<T_1>>
  getListDetail: <T_2 = any>({
    endpoint,
    contentId,
    queries,
    customRequestInit,
  }: GetListDetailRequest) => Promise<T_2 & MicroCMSContentId & MicroCMSDate>
  getObject: <T_3 = any>({
    endpoint,
    queries,
    customRequestInit,
  }: GetObjectRequest) => Promise<T_3 & MicroCMSDate>
  create: <T_4 extends Record<string | number, any>>({
    endpoint,
    contentId,
    content,
    isDraft,
    customRequestInit,
  }: CreateRequest<T_4>) => Promise<WriteApiRequestResult>
  update: <T_5 extends Record<string | number, any>>({
    endpoint,
    contentId,
    content,
    customRequestInit,
  }: UpdateRequest<T_5>) => Promise<WriteApiRequestResult>
  delete: ({
    endpoint,
    contentId,
    customRequestInit,
  }: DeleteRequest) => Promise<void>
}

export abstract class CmsClient {
  private static _client: MicroCmsClientInterface
  ...
}

以下のissueのコメントにもあるように、createClient の型定義を導入するのはどうでしょうか?
方針がよさそうであれば自分の方でプルリクを出すことも可能です。
#4 (comment)

(もし実装するとなった場合、MicroCmsClientcreateClient のパラメータの型として定義されているので、命名が難しいなと思っております。
可能ならパラメータの型は MicroCmsClientParameter みたいに変えられればいいなと思うのですが、後方互換性がなくなるので微妙だよなあと...。)

Wrire APIでコンテンツを作成する際に「 message is `Request body is empty.`」エラーが発生する

私は管理画面のAPIプレビューのコードや、REAMDEやドキュメントを見る限り、
Wrire APIでcontentに入る値はAPIスキーマ構造に沿った値になると理解しています。

https://document.microcms.io/content-api/post-content

私がどこか抜けているだけだと思うのですが、APIスキーマを定義してWrire APIを実行すると、
下記のリクエストでbodyが空である旨のエラーが発生します。

[1] Exception from a finished function: Error: fetch API response status: 400
[1]   message is `Request body is empty.`

サンプルコードは下記です

import { createClient } from 'microcms-js-sdk'

const.client = createClient({
   apiKey: 'xxxxx',
   serviceDomain: 'xxxxx'
})

(async () => {
  await client.create({
    endpoint: 'xxxxx',
    contest: {
      userId: 'xxxxx',
      username: 'xxxxx'
    }
),
})()
{
  "dependencies": {
    "microcms-js-sdk": "^2.3.2"
  },
  "devDependencies": {
    "typescript": "^4.9.5"
  },
  "volta": {
    "node": "18.12.1",
    "npm": "9.1.2"
  }
}

APIのキャッシュ?がクリア出来ない

事象

  • microcmsで記事を更新、vercelにデプロイしたが、新記事が反映されず。
  • SSGでAPIから取得してきたデータが古いことがconsoleで確認された。
  • vercelの管理画面で古い旨を確認。
  • とりあえず、limitを3→6にして、再度push デブロイで更新されました。

要望

  • APIのキャッシュ?をクリア出来るオプションはありますか?常に最新のデータを取ってくるなど。

コード

// libs
import { microcmsClient } from '@/libs/microcmsClient'

// type
import { MicroCMSResponse, WorkIndex } from '@/types/microcms'

export async function fetchTopList() {

  const works: WorkIndex[] = await microcmsClient
    .get<MicroCMSResponse<WorkIndex[]>>({
      endpoint: 'works',
      queries: {
        limit: 3,
        fields: 'id,title,slug,date,publishedAt2,category,technology,slider',
      },
    })
    .then((result) => result.contents)
    .catch(() => [])

  console.log(works) // ここでデータが古いことを確認
  return {
    works,
  }
}

`get()` 実行時、 `contentId` を指定しなかった場合型と実際の値が乖離してしまう

#4 (comment) で指摘されている内容と同様です。
以下の条件でジェネリクスに記述した型と実際に返される値の型が乖離してしまいます。

type article = {
  body: string
}
const endpoint = 'this-is-endpoint'
const queries: MicroCMSQueries = {
  filters: 'body[equals]hello'
}

await microCMS.get<article>({endpoint, queries}) // -> 定義上は article で返るはずだけど中身は MicroCMSListContent<article>

await microCMS.get<article>({endpoint, queries, contentId: 'article-id'}) // -> 定義通り article が返ってくる

Management API 対応

日頃からお世話になっております。

本番環境では公開済みのコンテンツのみを表示したいが、テスト環境では下書き状態のコンテンツも含めて表示し、一覧ページや詳細ページなどサイト全体の表示を確認したいという状況に直面しましたので、パラメータなどで叩く先を Management API に切り替えられるようにしていただけると大変ありがたいです…!

`Network Error. Details: TypeError: fetch failed` 発生時の詳細情報が知りたい

AWS Lambda の Node.js にて microcms-js-sdk を利用しています。

microCMS からのデータ取得時に低頻度で Network Error. Details: TypeError: fetch failed エラーとなる現象に直面しています。
このエラーの発生原因そのものは microcms-js-sdk 側の問題ではなくインフラ起因だろうと考えているのですが、事象の深堀りができずに困っています。

Node.js の fetch の場合、error.cause に根本エラーの情報(e.g. ENOTFOUND など) が含まれているため、これをログから確認したいのですが、以下の実装で error.message のみしか参照していないため、詳細情報がわかりません。

https://github.com/microcmsio/microcms-js-sdk/blob/main/src/createClient.ts#L132-L134

例えば以下のように変更してもらえると、根本エラーをログから確認できるようになると考えています.

return Promise.reject(error);

// or

return Promise.reject(new Error(`Network Error.\n  Details: ${error.message ?? ''}`, { cause: error });

ご検討いただければと思います。

Request: `queries.fields`にstring[]で渡せるようにしたい

現在、queries.fieldsに渡す情報はカンマ区切りのstringですが、[ 'title', 'publishedAt' ]のようにstring[]も渡せるようにして欲しいです。

理由としては、今後配列形式であれば APIスキーマ情報 をtypescriptで型定義することで、queries.fieldsなどに渡すパラメーターに型補完を効かせることができるのではないか?と考えたためです。
example: string[] => ( 'id' | 'title' | 'body' )[]

Before

client.get({
  endpoint: 'endpoint',
  queries: { fields: 'title,publishedAt' },
})

After

client.get({
  endpoint: 'endpoint',
  queries: { fields: [ 'title', 'publishedAt' ] },
})

Feature

type EndPointContent = {
  id: string
  name: string
  body: string
}


client.get<EndPointContent>({
  endpoint: 'endpoint',
  queries: { fields: [ 'id', 'name' ] }, // 型補完が効いている状態
})

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.