Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

TS: Type of ApolloContext makes it hard to use #3016

Closed
sseppola opened this issue May 6, 2019 · 0 comments · Fixed by #3018
Closed

TS: Type of ApolloContext makes it hard to use #3016

sseppola opened this issue May 6, 2019 · 0 comments · Fixed by #3018

Comments

@sseppola
Copy link

sseppola commented May 6, 2019

Intended outcome:
I tried to use the exposed ApolloContext with React.useContext in my TS project.

Actual outcome:
I get a type error when using ApolloContext.

Screen Shot 2019-05-06 at 11 17 34

the problem is that the exposed ApolloContext type is defined as:

export interface ApolloContextValue {
    client?: ApolloClient<Object>;
    operations?: Map<string, {
        query: DocumentNode;
        variables: any;
    }>;
}
export declare const ApolloContext: React.Context<ApolloContextValue | undefined> | null;

where React.useContext doesn't accept null as a context.

How to reproduce the issue:
In a TS project:

import * as React from 'react';
import { ApolloContext } from 'react-apollo';

export function MyComponent(props) {
  const apolloContext = React.useContext(ApolloContext);
  return <div>stuff</div>;
}

I tried to use the codesandbox error template, but I got errors on all dependencies after changing the filenames to .tsx.

Version

  • apollo-client@2.5.1
  • react-apollo@2.5.5

Workaround

import * as React from 'react';
import { ApolloContext } from 'react-apollo';
import { ApolloContextValue } from 'react-apollo/ApolloContext';

type ApolloContextT = React.Context<ApolloContextValue>;

export function MyComponent(props) {
  const apolloContext = React.useContext(ApolloContext as ApolloContextT);
  return <div>stuff</div>;
}
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant