GraphQLResult and Observable<object> incorrect types for API.graphql

Type 'GraphQLResult | Observable<object>' is not assignable to type '{ data: CreateDocumentMutation; }'.
  Type 'GraphQLResult' is not assignable to type '{ data: CreateDocumentMutation; }'.
    Types of property 'data' are incompatible.
      Type 'object | undefined' is not assignable to type 'CreateDocumentMutation'.
        Type 'undefined' is not assignable to type 'CreateDocumentMutation'.  TS2322

Getting the above error using typescript after the new Amplify js version.

It would be better to use Observable<any> in this case because using type object is incompatible. In TypeScript the type object is the opposite of any and is not assignable to anything.

[michalmikolajczyk]

This problem popped up for me during the React Amplify tutorial https://docs.amplify.aws/start/getting-started/data-model/q/integration/react#connect-frontend-to-api

Line 23-24:

const todoData = await API.graphql(graphqlOperation(listTodos))
const todos = todoData.data.listTodos.items

The error is:

Property 'data' does not exist on type 'GraphQLResult<object> | Observable<object>'.
  Property 'data' does not exist on type 'Observable<object>'.ts(2339)

I managed to go around this problem by using this obvious kludge:

const todoData: any = await API.graphql(graphqlOperation(listTodos))

It would be nice with a proper solution though 😉

[chernando]

@michalmikolajczyk @selipso as you know using any disables type checking.

Until #5208 or #3748 get through, try something like this:

import { GraphQLResult } from "@aws-amplify/api";
import { ListTodosQuery } from "./api";

// ...

const todoData = (
  await API.graphql(graphqlOperation(listTodos))
) as GraphQLResult<ListTodosQuery>;

const todos = todoData.data.listTodos.items