Apollo-client: RequestInit is not defined in typescript typings

[tomitrescak]

Thanks for this amazing project! Loving it! A small detail:

When using apollo-client in typescript the RequestInit is not defined.
It also references the graphql library which typings is not a part of the project.

[jbaxleyiii]

@tomitrescak those are ambient definitions with typescript.

Can you try typings install graphql fetch?

[tomitrescak]

Unfortunatelly that did not help ;( If you try to setup a new project and install apollo-client from npm, will it compile? To me it does not even with those typings installed.

[stubailo]

@tomitrescak do you know how to set this up properly with TypeScript and NPM? I'm pretty new to TS, so I don't know what the right way to do it is. Any help would be much appreciated.

[tomitrescak]

@stubailo I've been working with TS for quite some time but am new to this ts distribution as well. Am trying to solve it at https://github.com/typings/typings/issues/495 Will let you know or will do PR for this.

[tomitrescak]

@stubailo ... oops, looks like there is NO solution for this as you depend on ambient external library n your code. The solution for now is to REMOVE the .d.ts files from the project and let "typings" project automatically generate those.

[stubailo]

Whaaaat. But what if people aren't using typings? Is there not a standard way to distribute this stuff in TypeScript? I'd rather not require people to use the typings tool to use this library.

[stubailo]

Could we just include all of the type definitions for graphql in our package?

[tomitrescak]

Unfortunatelly NO ;( Because you do not have tsconfig.json in your project, the ambient declaration will not be resolved.Yet, there are several options.

1. Convince graphql people to include typings in their project. In order for me to compile I have manually placed following file into node_modules/graphql/index.d.ts file.

export class Document {}
export class GraphQLResult {}
export class SelectionSet {}
export class GraphQLError {}

With this the compilation still fails as you are using some RequestInit variable that is not imported from anywhere. You need to properly import RequestInit somewhere.

1. The other option is to distribute single "d.ts" ambient declaration file that does not reference external modules such as graphql.

[stubailo]

RequestInit should come from the typings for isomorphic-fetch, but you're right - we don't import it anywhere at all! How does our code even compile??

[tomitrescak]

You have an ambient declarion in your project at "typings/browser/ambient/isomorphic-fetch/index.d.ts"

[stubailo]

I thought you still had to import those - like I can't use any of the definitions from graphql without importing them first. Is there something about that definition which makes it global?

[tomitrescak]

Yes. If you declare in in ambient file such as

// file: myambients.d.ts
declare interface Foo { }

Foo is now accessible in global namespace

You had to "import" from graphql, because you are importing objects. Foo is just a type definition used by Typescript.

[stubailo]

I believe you, but when I use GraphQL stuff, when I do:

import { Document, FragmentDefinition } from 'graphql';

Those aren't objects exported by the NPM package at all - those are only types exported by the definition.

[stubailo]

I think this is because the grapqhl definition uses:

declare module "graphql" {

And puts all of the types in there, vs. isomosphic fetch which just puts stuff in the root:

interface RequestInit {

[tomitrescak]

It all depends on the ambient declaration:

// file_a.d.ts
declare interface Foo { }

// file_b.d.ts

declare module "graphql" {
   export interface Bar { }
}

Foo is accessible globaly
Bar you have to import from "graphql"

[oexza]

any progress on this?. I'm an angular 2 newbie, I'm having this same issue, and i have no idea how to work around it, using angular-cli@webpack and angular 2-rc5.

`ERROR in [default] /home/peace/Desktop/school-sync-student/node_modules/apollo-client/QueryManager.d.ts:16:27
Cannot find namespace 'NodeJS'.

ERROR in [default] /home/peace/Desktop/school-sync-student/node_modules/apollo-client/afterware.d.ts:2:14
Cannot find name 'IResponse'.

ERROR in [default] /home/peace/Desktop/school-sync-student/node_modules/apollo-client/afterware.d.ts:3:13
Cannot find name 'RequestInit'.

ERROR in [default] /home/peace/Desktop/school-sync-student/node_modules/apollo-client/middleware.d.ts:4:13
Cannot find name 'RequestInit'.

ERROR in [default] /home/peace/Desktop/school-sync-student/node_modules/apollo-client/networkInterface.d.ts:26:11
Cannot find name 'RequestInit'.

ERROR in [default] /home/peace/Desktop/school-sync-student/node_modules/apollo-client/networkInterface.d.ts:34:13
Cannot find name 'RequestInit'.

ERROR in [default] /home/peace/Desktop/school-sync-student/node_modules/apollo-client/networkInterface.d.ts:37:14
Cannot find name 'IResponse'.

ERROR in [default] /home/peace/Desktop/school-sync-student/node_modules/apollo-client/networkInterface.d.ts:38:13
Cannot find name 'RequestInit'.

ERROR in [default] /home/peace/Desktop/school-sync-student/node_modules/apollo-client/networkInterface.d.ts:42:67
Cannot find name 'RequestInit'.
`

[kamilkisiela]

@oexza you can take a look on GitHunt, both react and angular2 versions.

[patriknil90]

I'm having the exact same issue as @oexza . My project's running on Angular 2-RC5/Webpack and trying to follow the docs from: http://docs.apollostack.com/apollo-client/angular2.html. I have all peer dependencies installed, although I cannot find any good documentation on how to import/install the isomorphic-fetch typings (and get it to work with apollo-client) which I think I will need to get rid of these errors.

Trying to reproduce the way in wich you done it in Githunt with no success.

[kamilkisiela]

@patriknil90 You should install isomorphic-fetch as one of npm dependencies to add the polyfill.

Then install typings as follows:

To resolve missing RequestInit and IResponse you should run:

typings i -SG dt~isomorphic-fetch // or use @types/isomorphic-fetch from npm

To fill the gap with NodeJS:

typings i -SG env~node // or use @types/node from npm

---

@stubailo I noticed that IResponse is specific to isomorphic-fetch, typings of whatwg-fetch doesn't include it.

[patriknil90]

Thank you @kamilkisiela ! Got it running thanks to this ^

[helfer]

Closing this, since it's quite dated and seems to have been solved.

[guilhermedecampo]

@helfer I would like to know which properties the type RequestInitaccept.
How can I do that? This should be declared somewhere at least in the docs no?

Thank you

[helfer]

RequestInit is defined in fetch (isomorphic-fetch):

interface RequestInit {
    method?: string;
    headers?: HeaderInit | { [index: string]: string };
    body?: BodyInit;
    mode?: string | RequestMode;
    credentials?: string | RequestCredentials;
    cache?: string | RequestCache;
}

[monolithed]

Here is my solution:

"lib": [
    "dom",
    "es2017",
    "esnext.asynciterable"
]

[ewyler]

Be careful, pulling in the DOM library does some weird things like add certain variables to the global scope that will then be runtime and not compile time errors if you use them w/o declaring them -
you really don't want to pull in the DOM if you aren't executing in a browser. See e.g. https://github.com/Microsoft/TypeScript/issues/18433

[lednhatkhanh]

Why close this, I'm facing this problem and I don't want to include dom lib to my server project