{"action":"created","issue":{"url":"https://api.github.com/repos/apollographql/apollo-client/issues/2201","repository_url":"https://api.github.com/repos/apollographql/apollo-client","labels_url":"https://api.github.com/repos/apollographql/apollo-client/issues/2201/labels{/name}","comments_url":"https://api.github.com/repos/apollographql/apollo-client/issues/2201/comments","events_url":"https://api.github.com/repos/apollographql/apollo-client/issues/2201/events","html_url":"https://github.com/apollographql/apollo-client/issues/2201","id":260132185,"number":2201,"title":"Object has no __typename or id Available When Attempting to Specify IDs in ApolloClient dataIdFromObject in Angular (4); Webpack Fails to Compile","user":{"login":"maplion","id":8908849,"avatar_url":"https://avatars1.githubusercontent.com/u/8908849?v=4","gravatar_id":"","url":"https://api.github.com/users/maplion","html_url":"https://github.com/maplion","followers_url":"https://api.github.com/users/maplion/followers","following_url":"https://api.github.com/users/maplion/following{/other_user}","gists_url":"https://api.github.com/users/maplion/gists{/gist_id}","starred_url":"https://api.github.com/users/maplion/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maplion/subscriptions","organizations_url":"https://api.github.com/users/maplion/orgs","repos_url":"https://api.github.com/users/maplion/repos","events_url":"https://api.github.com/users/maplion/events{/privacy}","received_events_url":"https://api.github.com/users/maplion/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-09-25T01:26:46Z","updated_at":"2017-10-08T08:58:13Z","closed_at":null,"author_association":"NONE","body":"**Intended outcome:**\r\nSpecify IDs in Apollo configuration to tell queries about updates when new information becomes available for an Angular project, as per http://dev.apollodata.com/angular2/cache-updates.html\r\n\r\n**Actual outcome:**\r\n`Property '__typename' does not exist on type 'Object'.` and `Property 'id' does not exist on type 'Object'.` When angular-cli webpack attempts to compile.\r\n\r\n**How to reproduce the issue:**\r\nCreate An Apollo client.ts with the following:\r\n```typescript\r\nimport { ApolloClient, createNetworkInterface } from 'apollo-client';\r\n\r\nconst client = new ApolloClient({\r\n    networkInterface: createNetworkInterface({\r\n        uri: '/graphql',\r\n        opts: {\r\n            credentials: 'same-origin',\r\n        },\r\n    }),\r\n    dataIdFromObject: o => `${o.__typename}-${o.id},`  // this object does not have __typename or id available and webpack fails to compile\r\n});\r\n\r\nexport function getClient(): ApolloClient {\r\n    return client;\r\n}\r\n```\r\n\r\nIt should be noted that in a similar React-based project, the following works fine:\r\n```javascript\r\nimport ApolloClient from 'apollo-client';\r\nconst client = new ApolloClient({\r\n    dataIdFromObject: o => `${o.__typename}-${o.id},` \r\n});\r\n```\r\n\r\n**Version**\r\n- apollo-client@^1.9.2\r\n\r\nAm I missing something on the Angular side or are others experiencing this issue?  Anyone know of a fix or workaround?  Thank you."},"comment":{"url":"https://api.github.com/repos/apollographql/apollo-client/issues/comments/334992653","html_url":"https://github.com/apollographql/apollo-client/issues/2201#issuecomment-334992653","issue_url":"https://api.github.com/repos/apollographql/apollo-client/issues/2201","id":334992653,"user":{"login":"Nyaruiru","id":26364142,"avatar_url":"https://avatars1.githubusercontent.com/u/26364142?v=4","gravatar_id":"","url":"https://api.github.com/users/Nyaruiru","html_url":"https://github.com/Nyaruiru","followers_url":"https://api.github.com/users/Nyaruiru/followers","following_url":"https://api.github.com/users/Nyaruiru/following{/other_user}","gists_url":"https://api.github.com/users/Nyaruiru/gists{/gist_id}","starred_url":"https://api.github.com/users/Nyaruiru/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Nyaruiru/subscriptions","organizations_url":"https://api.github.com/users/Nyaruiru/orgs","repos_url":"https://api.github.com/users/Nyaruiru/repos","events_url":"https://api.github.com/users/Nyaruiru/events{/privacy}","received_events_url":"https://api.github.com/users/Nyaruiru/received_events","type":"User","site_admin":false},"created_at":"2017-10-08T08:58:13Z","updated_at":"2017-10-08T08:58:13Z","author_association":"NONE","body":"The issue stems from type definition of 'IdGetter' function in Apollo client source code. 'dataIdFromObject' is of type 'IdGetter' which takes one argument of type 'Object' but the Object interface in the es5 library does note define '__typename' and 'id'. This makes that code fail the type check.\r\nYou can find type IdGetter in the last line of apollo-client's 'types.d.ts' file. Path to the file is 'node_modules>apollo-client>core>types.d.ts\r\nFIX:\r\nFind this line.\r\n`export declare type IdGetter = (value: Object) => string | null | undefined;`\r\n\r\nOn top of it define an interface 'IdGetterObj' that extends interface Object and include '__typename' and 'id' as optionals as follows.\r\n`\r\nexport interface IdGetterObj extends Object {\r\n    /**dataIdFromObject typename and id definitions */\r\n    __typename?: string;\r\n    id?: number;\r\n}\r\n` \r\nFinally, change the type of the value in the original line to 'IdGetterObj' as follows.\r\n`export declare type IdGetter = (value: IdGetterObj) => string | null | undefined;`\r\n\r\nYou should be good to go!"}}
{"actor":{"display_login":"Nyaruiru"}}