microcmsio / microcms-js-sdk Goto Github PK
View Code? Open in Web Editor NEWmicroCMS JavaScript SDK.
Home Page: https://www.npmjs.com/package/microcms-js-sdk
License: Apache License 2.0
microCMS JavaScript SDK.
Home Page: https://www.npmjs.com/package/microcms-js-sdk
License: Apache License 2.0
現状、MicroCMSDate型は次の定義になっています。
export interface MicroCMSDate {
createdAt: string;
updatedAt: string;
publishedAt: string;
revisedAt: string;
}
しかし、一度も公開していないコンテンツにはpublishedAt
とrevisedAt
は存在しないので、次の定義であるべきだと思います。
export interface MicroCMSDate {
createdAt: string;
updatedAt: string;
publishedAt?: string;
revisedAt?: string;
}
型定義の見直しを行っています。
型定義に関して、ご意見やバグフィックス等ありましたらコメント頂けると助かります。
axiosを使用した場合、error.response.statusでHTTPステータスコードを取得することが出来るのですが
microcms-js-sdkを使用している場合、ステータスコードのみを取得できないので、取得できるようにしてほしいです。
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, //新しいパラメータ
})
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の制限事項に沿うための実装を行う必要があると考えます。こちらの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)
(もし実装するとなった場合、MicroCmsClient
が createClient
のパラメータの型として定義されているので、命名が難しいなと思っております。
可能ならパラメータの型は MicroCmsClientParameter
みたいに変えられればいいなと思うのですが、後方互換性がなくなるので微妙だよなあと...。)
私は管理画面の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"
}
}
// 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,
}
}
現状では res.json
をした結果を返しており、レスポンスヘッダーなどを利用できない。
これらを利用できるように、返却する値を変更するオプションを追加するのはどうだろうか?
#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 が返ってくる
Next.jsのプレビューモードなど、動的にプレビュー環境の切り替えを行いたいケースがある。
client.get()
時にフラグでglobalDraftKey
の使用有無を切り替えたい。
Write系の処理はManagement APIとして別のSDKで対応を検討中
日頃からお世話になっております。
本番環境では公開済みのコンテンツのみを表示したいが、テスト環境では下書き状態のコンテンツも含めて表示し、一覧ページや詳細ページなどサイト全体の表示を確認したいという状況に直面しましたので、パラメータなどで叩く先を Management API に切り替えられるようにしていただけると大変ありがたいです…!
Document: https://document.microcms.io/content-api/get-content#hefb095db2a
Lines 19 to 29 in f130f3d
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 });
ご検討いただければと思います。
現在、queries.fields
に渡す情報はカンマ区切りのstringですが、[ 'title', 'publishedAt' ]
のようにstring[]も渡せるようにして欲しいです。
理由としては、今後配列形式であれば APIスキーマ情報 をtypescriptで型定義することで、queries.fields
などに渡すパラメーターに型補完を効かせることができるのではないか?と考えたためです。
example: string[]
=> ( 'id' | 'title' | 'body' )[]
client.get({
endpoint: 'endpoint',
queries: { fields: 'title,publishedAt' },
})
client.get({
endpoint: 'endpoint',
queries: { fields: [ 'title', 'publishedAt' ] },
})
type EndPointContent = {
id: string
name: string
body: string
}
client.get<EndPointContent>({
endpoint: 'endpoint',
queries: { fields: [ 'id', 'name' ] }, // 型補完が効いている状態
})
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.