不能将类型'Query'分配给类型'[(options ?: QueryLazyOptions< Exact< {其中?: [英] Type 'Query' is not assignable to type '[(options?: QueryLazyOptions<Exact<{ where?:

问题描述

借助于代码生成，我生成了自定义的graphql钩子和类型.

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
    );
};

对于数据，我使用的是codegen创建的自定义类型.但是，我不断收到有关以下数据的错误:

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
    }
  }
`;

推荐答案

您应该按照

You should have your data shape typed as in docs

const [loadUsers，{数据，错误}] = useLoadUsersLazyQuery();

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

如果生成器未定义任何 data 类型，则需要传递整个结果:

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

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

然后将其作为道具传递

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

< UsersFoundList/> 中的

data 类型保持不变:

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'

节点将是一个数组， totalCount 是一个数字

nodes will be an array, totalCount a number

这篇关于不能将类型'Query'分配给类型'[(options ?: QueryLazyOptions< Exact< {其中?:的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！