Typings: data depending on error and loading

If there is no error and loading is false, is it even possible to have undefined data?

The example given in the Readme is not possible in typescript, because data might be undefined in the final return statement so we can’t map over data.dogs.

It would be nice if the typings could reflect this.

const Dogs = () => {
  const { data, error, loading } = useQuery(GET_DOGS);
  if (loading) {
    return <div>Loading...</div>;
  };
  if (error) {
    return <div>Error! {error.message}</div>;
  };

  return (
    <ul>
      {data.dogs.map(dog => (
        <li key={dog.id}>{dog.breed}</li>
      ))}
    </ul>
  );
};

[tleunen]

I think that data is always TData | {} in Apollo. Would it be best to do this too here?

[codepunkt]

Not taking partials and errors into account, i was thinking about something along these lines (using discriminated unions, simplified example):

interface QueryHookStateLoading {
  data: undefined
  loading: true
  error: undefined
  networkStatus: NetworkStatus | undefined
}

interface QueryHookStateFailure {
  data: undefined
  loading: false
  error: ApolloError
  networkStatus: NetworkStatus | undefined
}

interface QueryHookStateSuccess<T> {
  data: T
  loading: false
  error: undefined
  networkStatus: NetworkStatus | undefined
}

type QueryHookState<T> =
  | QueryHookStateLoading
  | QueryHookStateFailure
  | QueryHookStateSuccess<T>

If something like this was possible, it would clearly help! 👍