类型 'Query' 不可分配给类型 '[(options?: QueryLazyOptions<Exact< where?:

Posted 2023-03-08

【中文标题】类型 \'Query\' 不可分配给类型 \'[(options?: QueryLazyOptions<Exact< where?:

【英文标题】：Type 'Query' is not assignable to type '[(options?: QueryLazyOptions<Exact< where?:类型 'Query' 不可分配给类型 '[(options?: QueryLazyOptions<Exact< where?:

【发布时间】：2020-11-18 23:19:06

【问题描述】：

在 codegen 的帮助下，我生成了自定义的 graphql 钩子和类型。

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

现在我正在尝试使用钩子并将数据传递给另一个组件，如下所示：

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 创建的自定义类型。但是，我不断收到以下数据错误：

<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.

由于类型是自动生成的，这应该像在其他情况下一样工作。

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

【问题讨论】：

您传递的data 类型是您的“基本/根数据类型”，没有任何修饰符，只是在生成器的开头（作为基本类型）某处定义的纯预期字段类型（@987654328 @ ?)

不确定我是否正确理解了您的 qs，但 LoadUsersDocument 是带有 gql 标签的查询本身。 LoadUsersQueryResult 在整个 graphql 索引文件中只定义一次（就像我在 qs 中显示的那样）。 @xadm

loadUsersDocument 的定义？它返回的数据类型/形状？

添加到 qs@xadm

我们只需要 useQuery 返回的“数据”字段类型 - 节点：用户类型数组、totalCount 类型等...useLoadUsersQuery defs?

【参考方案1】：

您的数据形状应该像 docs 一样键入

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

如果生成器没有定义data 类型，那么您需要传递整个结果：

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

然后将其作为道具传递

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

data 输入 <UsersFoundList/> 保持不变：

type UsersFoundListProps = 
  data: LoadUsersQueryResult,
;

但是你需要使用data.'prefix'或者分解它：

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

nodes 将是一个数组，totalCount 是一个数字

【讨论】：

doc中的数据类型是UserConnection，也是codegen定义的。我也尝试过使用它，但这也不起作用。在我之前的项目中，像 LoadUsersQueryResult 这样的东西就可以了。所以我猜我使用 codegen 的方式有问题:(

type UsersFoundListProps = data: UserConnection 出错？