React-apollo: Typescript errors with graphql HOC

Created on 25 Jul 2018 · 14Comments · Source: apollographql/react-apollo

Intended outcome:
When trying the typescript hero example in the apollo docs, props passed through from apollo-react's graphql HOC approach should pick up loading, error and hero props with accurate types.

Actual outcome:
My setup returns the typescript issue with:

[ts] Type 'DataValue<Response, OperationVariables> | undefined' has no property 'loading' and no string index signature.

and similar messages for error and hero

How to reproduce the issue:
Using base create-react-app-typescript application (). Then adding necessary apollo/graphql modules: yarn add graphql graphql-tag react-apollo apollo-client

Here is the code:

import gql from "graphql-tag";
import * as React from "react";
import { graphql } from "react-apollo";

const HERO_QUERY = gql`
  query GetCharacter() {
    hero() {
      name
      id
      friends {
        name
        id
        appearsIn
      }
    }
  }
`;

type Hero = {
  name: string;
  id: string;
  appearsIn: string[];
  friends: Hero[];
};

type Response = {
  hero: Hero;
};

const withCharacter = graphql<{}, Response>(HERO_QUERY);

export default withCharacter(({ data: { loading, hero, error } }) => {
  if(loading) {
    return <div>Loading</div>;
  }
  if(error) {
    return <h1>ERROR</h1>;
  }
  return <div/>;
});

Version

bug

Source

dustinlakin

👍10

Most helpful comment

try it, the way around which without disable strictNullChecks in tscnofig:

export default withCharacter(({ data }) => {
  const { loading, error, hero } = data!;
  if (loading) return <div>Loading</div>;
  if (error) return <h1>ERROR</h1>;
  // process hero
  return <div />;
});

taozhi8833998 on 19 Jan 2019

👍3 🚀1 ❤1 😄1

All 14 comments

I figured out a work around to make my IDE (both Sublime Text 3 and VSCode) to stop flagging this error by removing "strictNullChecks": true from my tsconfig.json file.

Not sure why it does this, but at least my IDE is picking up the types correctly again.

dustinlakin on 2 Aug 2018

👍3 👎2

Having the same issue as @dustinlakin . Getting the type error [ts] Type 'DataValue<Response, Variables> | undefined' has no property 'loading' and no string index signature.
Version

├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

thenormalsquid on 28 Aug 2018

In the same boat. Interested to know if anyone has resolved this. On [email protected]

peterholcomb on 29 Aug 2018

👍2

Anyone find a way to deal with this?

slessans on 20 Sep 2018

My solution right now is to provide defaults for each parameter which is somewhat cumbersome:

const SomeComponent = withQuery(({ data: { loading = true, error = null, value = null } = {} }) => {
  // ....
})

This will compile even in strict mode. Seems like this should be unnecessary though.

slessans on 20 Sep 2018

Same problem, any idea how to fix it?

iEricKoh on 24 Sep 2018

the only solution i found so far is to add "strictNullChecks": false to .tsconfig as suggested earlier, not a good fix, but at least it works

atomicleads on 9 Oct 2018

Take a look at how UserChildProps is used in my example

import React, { Component } from "react";
import gql from "graphql-tag";
import { graphql, ChildDataProps } from "react-apollo";

type Response = {
  users: [User];
};

type Variables = {
  q: string;
};

type InputProps = {
  q: string;
};

type UserChildProps = ChildDataProps<InputProps, Response, Variables>;


class UsersResult extends Component<UserChildProps, { }> {
  render() {
    const { loading, error, users } = this.props.data;
    if (loading) {
      return <h4>Loading...</h4>;
    }
    if (error) {
      return <h4>{error.message}</h4>;
    }
    return <div />;
  }
}
const UserSearch = gql`
  query UserSearch {
    user($q: String!) @rest(type: "User", path: "/users?{args.q}&{context.apiKey}") {
      id,
      city,
      company,
      country,
      created_on,
      display_name,
      fields,
      first_name,
      images,
      last_name,
      occupation,
      state,
      url,
      username
    }
  }
`;
type User = {
  id: string;
  city: string;
  company: string;
  country: string;
  created_on: Date;
  display_name: string;
  fields: string[];
  first_name: string;
  images: {
    [key: string]: string;
  };
  last_name: string;
  occupation: string;
  state: string;
  url: string;
  username: string;
};

const UsersResultQuery = graphql<InputProps, Response, Variables, UserChildProps>(UserSearch, {
  options: ({ q }) => {
    return { variables: { q } };
  }
})(UsersResult);

robbywashere-zz on 24 Oct 2018

I have the same problem. So I went for components which seem to be fine with strict types https://www.apollographql.com/docs/react/recipes/static-typing.html#typing-components

filipsuk on 25 Oct 2018

rosskevin on 27 Dec 2018

Hi guys, try casting operator: as

export default withCharacter(({ data: qData }) => {
  if (qData && qData.loading) return <div>Loading</div>;
  if (qData && qData.error) return <h1>ERROR</h1>;
  return (
    <div className="App">
      {qData && (qData as any).hero.map((n: SomeType, i: Int) => {})}
    </div>
  );
});

zhaiduo on 10 Jan 2019

try it, the way around which without disable strictNullChecks in tscnofig:

export default withCharacter(({ data }) => {
  const { loading, error, hero } = data!;
  if (loading) return <div>Loading</div>;
  if (error) return <h1>ERROR</h1>;
  // process hero
  return <div />;
});

taozhi8833998 on 19 Jan 2019

👍3 🚀1 ❤1 😄1

Thanks @taozhi8833998