我如何创建一个 Material UI 自动完成组件来处理 graphql 查询？

Question

我正在使用 React Typescript 并有一个自动完成 Material UI 组件。我正在尝试将查询建议添加到自动完成组件中。

我的 graphql 查询如下所示：

查询定义：

import gql from 'graphql-tag';
import {useQuery} from 'react-apollo';
import {Autocomplete} from '@material-ui/lab';
const TODOS = gql`
  query todos($id: ID!) {
    todo(id: $id) {
      id
      name
    }
  }
`;

查询初始化：

const { loading, error, data } = useQuery(TODOS, {
  variables: { id: 1 }
});

自动完成组件

{loading ? (
                <p>Loading ...</p>
              ) : (
                <>
                  <div>
                    {data &&
                  data.todo &&
                  data.todo.map(
                    (idx: {id: number; name: string}) => (
                      <Autocomplete
                        id="combo-box-demo"
                        options={idx.name}
                        getOptionLabel={option => option.name}
                        style={{width: 300}}
                        renderInput={params => (
                          <TextField
                            {...params}
                            label="Combo box"
                            variant="outlined"
                          />
                        )}
                      />
                    )
                  )}

我收到以下错误：

对于行："options={idx.name}" - 类型 'string' 不可分配给类型 'unknown[]'.
对于行：“getOptionLabel={option => option.name}” - 对象类型为 'unknown'.

我遇到了以下问题：

我怎样才能让它工作？
导致此错误的原因是什么？

Answer 1

options 需要一个数组，而你传递的是一个字符串。 Object is of type 'unknown' 是一般的 TS 错误信息。我想如果你这样输入：

 getOptionLabel={(option: {name: string}) => option.name}

应该停止了。

我如何创建一个 Material UI 自动完成组件来处理 graphql 查询？

How can I create a Material UI Autocomplete component to work with graphql queries?

reactjs

typescript

autocomplete

graphql

material-ui