Can't set fetch agent

[juan-carvajal]

Steps to Reproduce

-

import { createApi } from 'unsplash-js';
import fetch from 'node-fetch'
import { InitParams } from 'unsplash-js/dist/helpers/request';

const params: InitParams ={
  accessKey: "9R79Y48ZzMclksf3brbWZpQT8NbABgbmWe8gqyTwIso",
  fetch: fetch
}

Observed Behaviour

• Get this error:
• Type '(url: RequestInfo, init?: RequestInit | undefined) => Promise' is not assignable to type '(input: RequestInfo, init?: RequestInit | undefined) => Promise'. Types of parameters 'url' and 'input' are incompatible. Type 'RequestInfo' is not assignable to type 'import("c:/Users/1144102435/Documents/Github/menupp-next/functions/node_modules/node-fetch/@types/index").RequestInfo'. Type 'Request' is not assignable to type 'RequestInfo'. Type 'Request' is missing the following properties from type 'Request': size, bufferts(2322) request.d.ts(25, 5): The expected type comes from property 'fetch' which is declared here on type 'InitParams'

Image or video please.

Expected Behaviour

• Works fine.

Technical Notes

• Env (Node 10):

  "unsplash-js": "^7.0.15",
  "node-fetch": "^3.0.0",

[OliverJAsh]

For now you can workaround this using a type assertion, although it's far from ideal:

import nodeFetch from 'node-fetch'
import { InitParams } from 'unsplash-js/dist/helpers/request';

const params: InitParams ={
  accessKey: "abc",
  fetch: nodeFetch as unknown as typeof fetch
}

This boils down to the fact that nodeFetch is not assignable to fetch (as defined in lib.dom):

import nodeFetch from 'node-fetch'

/*
Type '(url: RequestInfo, init?: RequestInit) => Promise<Response>' is not assignable to type '(input: RequestInfo, init?: RequestInit) => Promise<Response>'.
  Types of parameters 'url' and 'input' are incompatible.
    Type 'RequestInfo' is not assignable to type 'import("/Users/oliverash/Development/unsplash-js-test/node_modules/node-fetch/@types/index").RequestInfo'.
      Type 'Request' is not assignable to type 'RequestInfo'.
        Type 'Request' is missing the following properties from type 'Request': size, buffer
*/
const myFetch: typeof fetch = nodeFetch;

fetch is defined in lib.dom, but since node-fetch is designed to be used in Node—not in the browser—we shouldn't be using lib.dom (related discussion).

The TS project needs to be configured to remove the dom lib. Even with this change, the issue will remain because of another issue with node-fetch whereby they pull in lib.dom: https://github.com/node-fetch/node-fetch/issues/1285.

Once that is fixed we should be able to do this:

import * as nodeFetch from 'node-fetch'
import { InitParams } from 'unsplash-js/dist/helpers/request';

declare global {
  var fetch: typeof nodeFetch.default;
  type RequestInit = nodeFetch.RequestInit;
  type Response = nodeFetch.Response;
}

const params: InitParams ={
  accessKey: "abc",
  fetch: nodeFetch.default
}

[OliverJAsh]

Closing as it's not an issue with this library as per the comment above.