Merge pull request #39 from himorishige/feat/use-cross-fetch

node-fetchからcross-fetchへの変更

Author: himorishige

.node-version

@@ -0,0 +1 @@
+v14.20.0

README.md

@@ -47,6 +47,7 @@ const { createClient } = microcms;
 const client = createClient({
   serviceDomain: "YOUR_DOMAIN", // YOUR_DOMAIN is the XXXX part of XXXX.microcms.io
   apiKey: "YOUR_API_KEY",
+  // customFetcher: fetch.bind(globalThis), // Provide a custom `fetch` implementation as an option
 });
 </script>
 ```

package-lock.json

@@ -29,7 +29,7 @@
     "dist"
   ],
   "dependencies": {
-    "node-fetch": "^2.6.1",
+    "cross-fetch": "^3.1.5",
     "qs": "^6.10.1"
   },
   "devDependencies": {
@@ -39,7 +39,6 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@types/jest": "^28.1.6",
     "@types/node": "^15.0.2",
-    "@types/node-fetch": "^2.5.10",
     "@types/qs": "^6.9.6",
     "@typescript-eslint/eslint-plugin": "^4.22.1",
     "@typescript-eslint/parser": "^4.22.1",

package.json

@@ -2,7 +2,6 @@
  * microCMS API SDK
  * https://github.com/microcmsio/microcms-js-sdk
  */
-import fetch, { RequestInit } from 'node-fetch';
 import { parseQuery } from './utils/parseQuery';
 import { isString } from './utils/isCheckValue';
 import {
@@ -21,11 +20,16 @@ import {
   DeleteRequest,
 } from './types';
 import { API_VERSION, BASE_DOMAIN } from './utils/constants';
+import { generateFetchClient } from './lib/fetch';
 
 /**
  * Initialize SDK Client
  */
-export const createClient = ({ serviceDomain, apiKey }: MicroCMSClient) => {
+export const createClient = ({
+  serviceDomain,
+  apiKey,
+  customFetch,
+}: MicroCMSClient) => {
   if (!serviceDomain || !apiKey) {
     throw new Error('parameter is required (check serviceDomain and apiKey)');
   }
@@ -50,20 +54,19 @@ export const createClient = ({ serviceDomain, apiKey }: MicroCMSClient) => {
     customHeaders,
     customBody,
   }: MakeRequest) => {
-    const queryString = parseQuery(queries);
-
-    const baseHeaders: RequestInit = {
-      headers: { ...customHeaders, 'X-MICROCMS-API-KEY': apiKey },
-      body: customBody,
-      method,
-    };
+    const fetchClient = generateFetchClient(apiKey, customFetch);
 
+    const queryString = parseQuery(queries);
     const url = `${baseUrl}/${endpoint}${contentId ? `/${contentId}` : ''}${
       queryString ? `?${queryString}` : ''
     }`;
 
     try {
-      const response = await fetch(url, baseHeaders);
+      const response = await fetchClient(url, {
+        method: method || 'GET',
+        headers: customHeaders,
+        body: customBody,
+      });
 
       if (!response.ok) {
         throw new Error(`fetch API response status: ${response.status}`);
@@ -179,7 +182,7 @@ export const createClient = ({ serviceDomain, apiKey }: MicroCMSClient) => {
   };
 
   /**
-   * Update content in ther microCMS list and object API data
+   * Update content in their microCMS list and object API data
    */
   const update = async <T extends Record<string | number, any>>({
     endpoint,
@@ -206,7 +209,7 @@ export const createClient = ({ serviceDomain, apiKey }: MicroCMSClient) => {
   };
 
   /**
-   * Delete content in ther microCMS list and object API data
+   * Delete content in their microCMS list and object API data
    */
   const _delete = async ({
     endpoint,

src/createClient.ts

@@ -0,0 +1,40 @@
+import crossFetch, { Headers as CrossFetchHeaders } from 'cross-fetch';
+import { Fetch } from 'src/types';
+
+export const resolveFetch = (customFetch?: Fetch): Fetch => {
+  let _fetch: Fetch;
+  if (customFetch) {
+    _fetch = customFetch;
+  } else if (typeof fetch === 'undefined') {
+    _fetch = (crossFetch as unknown) as Fetch;
+  } else {
+    _fetch = fetch;
+  }
+  return (...args) => _fetch(...args);
+};
+
+export const resolveHeadersConstructor = () => {
+  if (typeof Headers === 'undefined') {
+    return CrossFetchHeaders;
+  }
+
+  return Headers;
+};
+
+export const generateFetchClient = (
+  apiKey: string,
+  customFetch?: Fetch
+): Fetch => {
+  const fetch = resolveFetch(customFetch);
+  const HeadersConstructor = resolveHeadersConstructor();
+
+  return async (req, init) => {
+    const headers = new HeadersConstructor(init?.headers);
+
+    if (!headers.has('X-MICROCMS-API-KEY')) {
+      headers.set('X-MICROCMS-API-KEY', apiKey);
+    }
+
+    return fetch(req, { ...init, headers });
+  };
+};

src/lib/fetch.ts

@@ -1,11 +1,12 @@
-import { BodyInit, HeadersInit } from 'node-fetch';
+export type Fetch = typeof fetch;
 
 /**
  * microCMS createClient params
  */
 export interface MicroCMSClient {
   serviceDomain: string;
   apiKey: string;
+  customFetch?: Fetch;
 }
 
 type depthNumber = 1 | 2 | 3;
@@ -80,7 +81,7 @@ export interface MakeRequest {
   queries?: MicroCMSQueries & Record<string, any>;
   method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
   customHeaders?: HeadersInit;
-  customBody?: BodyInit;
+  customBody?: string;
 }
 
 export interface GetRequest {

src/types.ts

@@ -5,6 +5,7 @@ describe('createClient', () => {
     const client = createClient({
       serviceDomain: 'serviceDomain',
       apiKey: 'apiKey',
+      customFetch: () => Promise.resolve(new Response()),
     });
 
     expect(typeof client.get === 'function').toBe(true);

tests/createClient.test.ts

@@ -0,0 +1,16 @@
+import { generateFetchClient } from '../../src/lib/fetch';
+
+describe('generateFetchClient', () => {
+  test('If no options is specified, cross-fetch is used', async () => {
+    const client = generateFetchClient('apiKey');
+    const response = await client('http://example.com');
+    expect(response.status).toBe(200);
+  });
+
+  test('If custom fetch is specified, custom fetch is used', async () => {
+    const customFetch = jest.fn();
+    const client = generateFetchClient('apiKey', customFetch);
+    await client('http://example.com');
+    expect(customFetch).toHaveBeenCalled();
+  });
+});