apollographql / react-apollo

:recycle: React integration for Apollo Client
https://www.apollographql.com/docs/react/
MIT License
6.85k stars 787 forks source link

Inconsistency between docs and type definitions #3194

Closed bezreyhan closed 5 years ago

bezreyhan commented 5 years ago

Intended outcome: When wrapping a component with the graphql HOC, a data prop is alway returned to the component.

Actual outcome: I would get a type error stating that data may be undefined

How to reproduce the issue: I think the Apollo documentation for adding types to a HOC may be incorrect. Or possibly, the type definitions are incorrect. The following snippet is provided in the Apollo Docs for adding types to a class component that is wrapped with a HOC:

https://www.apollographql.com/docs/react/recipes/static-typing/#classes-vs-functions

import { ChildProps } from "react-apollo";
const withCharacter = graphql<InputProps, Response>(HERO_QUERY, {
  options: ({ episode }) => ({
    variables: { episode }
  })
});
class Character extends React.Component<ChildProps<InputProps, Response>, {}> {
  render(){
    const { loading, hero, error } = this.props.data;
    if (loading) return <div>Loading</div>;
    if (error) return <h1>ERROR</h1>;
    return ...// actual component with data;
  }
}
export default withCharacter(Character);

From the snippet, it seems that this.props.data is always defined since we are destructing it. However, when I try to run this code I get a type error stating that data may be undefined.

The type definitions for ChildProps seems to be returning a Partial, which is why data is coming back as possibly undefined.

Any ideas if the docs are correct or the type definitions?

Version apollo-boost: 0.3.1 => 0.3.1 apollo-link: 1.2.11 => 1.2.11 apollo-link-context: 1.0.17 => 1.0.17 apollo-link-state: 0.4.2 => 0.4.2 react-apollo: 2.5.5 => 2.5.5

hwillson commented 5 years ago

React Apollo has been refactored to use React Hooks behind the scenes for everything, which means a lot has changed since this issue was opened (and a lot of outstanding issues have been resolved). We'll close this issue off, but please let us know if you're still encountering this problem using React Apollo >= 3.1.0. Thanks!