Type 'Query' is not assignable to type '[(options?: QueryLazyOptions<Exact<{ where?:

Question

By the help of codegen, I have generated custom graphql hooks and types.

    query loadUsers($where: UserFilter) {
  users(where: $where) {
    nodes {
      id
      email
      firstName
      lastName
      phoneNumber
    }
    totalCount
  }
}

export function useLoadUsersLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<LoadUsersQuery, LoadUsersQueryVariables>) {
          return ApolloReactHooks.useLazyQuery<LoadUsersQuery, LoadUsersQueryVariables>(LoadUsersDocument, baseOptions);
        }
export type LoadUsersQueryHookResult = ReturnType<typeof useLoadUsersQuery>;
export type LoadUsersLazyQueryHookResult = ReturnType<typeof useLoadUsersLazyQuery>;
export type LoadUsersQueryResult = ApolloReactCommon.QueryResult<LoadUsersQuery, LoadUsersQueryVariables>;

Now I am trying to use the hook and pass the data into another component like this:

export const UserSearchPage: FunctionComponent = () => {
  const [criteria, setCriteria] = useState('');
  const [searchItem, setSearchItem] = useState('');
  const classes = useStyles();

  const [loadUsers, { data, error }] = useLoadUsersLazyQuery();
  let ShowUsers = () => {
    const where: UserFilter = {};
    switch (Number(criteria)) {
      case 1:
        loadUsers({
          variables: {
            where: where,
          },
        });
        break;
      case 2:
        if (searchItem) {
          where.firstName_contains = searchItem;
          loadUsers({
            variables: {
              //where: { firstName_contains: searchItem },
              where: where,
            },
          });
        }
        break;
      default:
        console.log('default');
    }
  };

  return (
    <div> 
    <div className={classes.container}>
        <Select
          value={criteria}
          onChange={event => setCriteria(event.target.value as string)}
          displayEmpty>
          <MenuItem disabled value="">
            <em>Search By</em>
          </MenuItem>
          <MenuItem value={1}>All</MenuItem>
        </Select>
        <Button className={classes.button} onClick={() => ShowUsers()}>
          {' '}
          <SearchIcon />
          Search
        </Button>
        <br></br>
        {data!==null  && data!==undefined && <UsersFoundList data={data} />}
      </div>
      )
    </div>
  );
};

type UsersFoundListProps = {
    data: LoadUsersQueryResult,
};
export const UsersFoundList: FunctionComponent<UsersFoundListProps> = ({
    data,
}) => {
    console.log('data UserList', data);
    return (
        null
    );
};

For data, I am using the custom type created by codegen. However, I keep getting an error on data that:

<UsersFoundList data={data} />

Type 'LoadUsersQuery' is missing the following properties from type 'QueryResult<LoadUsersQuery, Exact<{ where?: UserFilter | null | undefined; }>>': client, data, loading, networkStatus, and 8 more.

Since the types are generated automatically, this should work as it's working in other cases.

export const LoadUsersDocument = gql`
  query loadUsers($where: UserFilter) {
    users(where: $where) {
      nodes {
        id
        email
        firstName
        lastName
        phoneNumber
      }
      totalCount
    }
  }
`;

Answer 1

You should have your data shape typed as in docs

const [loadUsers, { data, error }] = useLoadUsersLazyQuery();

If no data type defined by generator then you need to pass down entire result:

const queryResult = useLoadUsersLazyQuery();
const [loadUsers, { data, error }] = queryResult;

then pass it as prop

{data!==null  && data!==undefined && <UsersFoundList data={queryResult} />}

data type in <UsersFoundList/> stays the same:

type UsersFoundListProps = {
  data: LoadUsersQueryResult,
};

but you need to use data. 'prefix' or decompose it:

const {nodes, totalCount} = props.data.data; // instead of usual 'props.data'

nodes will be an array, totalCount a number