Apollo-client: ApolloClient on react with typescript using documented uri doesn't compile

Created on 17 Jan 2020  路  3Comments  路  Source: apollographql/apollo-client

here's what I have, this project started as the base react skeleton with typescript.

import { ApolloClient } from 'apollo-boost';

const client = new ApolloClient({
    uri: 'http://localhost:4000'
});
/Users/calebcushing/IdeaProjects/my-app/src/index.tsx
TypeScript error in /Users/calebcushing/IdeaProjects/my-app/src/index.tsx(9,5):
Argument of type '{ uri: string; }' is not assignable to parameter of type 'ApolloClientOptions<unknown>'.
  Object literal may only specify known properties, and 'uri' does not exist in type 'ApolloClientOptions<unknown>'.  TS2345

     7 | 
     8 | const client = new ApolloClient({
  >  9 |     uri: 'http://localhost:4000'
       |     ^
    10 | });
    11 | 
    12 | ReactDOM.render(<App />, document.getElementById('root'));

this is the typescript definition

export default class ApolloClient<TCacheShape> implements DataProxy {
    link: ApolloLink;
    store: DataStore<TCacheShape>;
    cache: ApolloCache<TCacheShape>;
    readonly queryManager: QueryManager<TCacheShape>;
    disableNetworkFetches: boolean;
    version: string;
    queryDeduplication: boolean;
    defaultOptions: DefaultOptions;
    readonly typeDefs: ApolloClientOptions<TCacheShape>['typeDefs'];
    private devToolsHookCb;
    private resetStoreCallbacks;
    private clearStoreCallbacks;
    private localState;
    constructor(options: ApolloClientOptions<TCacheShape>);
    stop(): void;
    watchQuery<T = any, TVariables = OperationVariables>(options: WatchQueryOptions<TVariables>): ObservableQuery<T, TVariables>;
    query<T = any, TVariables = OperationVariables>(options: QueryOptions<TVariables>): Promise<ApolloQueryResult<T>>;
    mutate<T = any, TVariables = OperationVariables>(options: MutationOptions<T, TVariables>): Promise<FetchResult<T>>;
    subscribe<T = any, TVariables = OperationVariables>(options: SubscriptionOptions<TVariables>): Observable<FetchResult<T>>;
    readQuery<T = any, TVariables = OperationVariables>(options: DataProxy.Query<TVariables>, optimistic?: boolean): T | null;
    readFragment<T = any, TVariables = OperationVariables>(options: DataProxy.Fragment<TVariables>, optimistic?: boolean): T | null;
    writeQuery<TData = any, TVariables = OperationVariables>(options: DataProxy.WriteQueryOptions<TData, TVariables>): void;
    writeFragment<TData = any, TVariables = OperationVariables>(options: DataProxy.WriteFragmentOptions<TData, TVariables>): void;
    writeData<TData = any>(options: DataProxy.WriteDataOptions<TData>): void;
    __actionHookForDevTools(cb: () => any): void;
    __requestRaw(payload: GraphQLRequest): Observable<ExecutionResult>;
    initQueryManager(): QueryManager<TCacheShape>;
    resetStore(): Promise<ApolloQueryResult<any>[] | null>;
    clearStore(): Promise<any[]>;
    onResetStore(cb: () => Promise<any>): () => void;
    onClearStore(cb: () => Promise<any>): () => void;
    reFetchObservableQueries(includeStandby?: boolean): Promise<ApolloQueryResult<any>[]>;
    extract(optimistic?: boolean): TCacheShape;
    restore(serializedState: TCacheShape): ApolloCache<TCacheShape>;
    addResolvers(resolvers: Resolvers | Resolvers[]): void;
    setResolvers(resolvers: Resolvers | Resolvers[]): void;
    getResolvers(): Resolvers;
    setLocalStateFragmentMatcher(fragmentMatcher: FragmentMatcher): void;
}

so I can see why it's not compiling but it baffles me that it doesn't match the documentation
Versions

System:
OS: macOS Mojave 10.14.6
Binaries:
Node: 10.18.1 - /usr/local/bin/node
Yarn: 1.21.1 - ~/IdeaProjects/my-app/node_modules/.bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Browsers:
Chrome: 79.0.3945.117
Firefox: 61.0.2
Safari: 13.0.4
npmPackages:
@apollo/react-hooks: ^3.1.3 => 3.1.3
apollo: ^2.21.3 => 2.21.3
apollo-boost: ^0.4.7 => 0.4.7

Most helpful comment

import ApolloClient from 'apollo-boost';

does not do the same thing as

import { ApolloClient } from 'apollo-boost';

intellij prefers the latter by default.... wow this was a bad design decision

All 3 comments

@xenoterracide You not need to install apollo package, removing this package works for me.

tried yarn remove apollo but I have the same issue

import ApolloClient from 'apollo-boost';

does not do the same thing as

import { ApolloClient } from 'apollo-boost';

intellij prefers the latter by default.... wow this was a bad design decision

Was this page helpful?
0 / 5 - 0 ratings