将 graphql 变量传递给 Material UI 组件

Question

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

我的 graphql 查询如下所示：

查询定义：

import gql from 'graphql-tag';
import {useQuery} from 'react-apollo';

const TODOS = gql`
  query todos($id: ID!) {
    todo(id: $id) {
      id
      name
    }
  }
`;

查询初始化：

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

我想创建一个自动完成组件，它将从文本字段组件中获取一个数值并将其传递给自动完成 material ui 组件？

我的数字组件如下所示：

 <TextField
          id="filled-number"
          label="Number"
          type="number"
          InputLabelProps={{
            shrink: true,
          }}
          variant="filled"
        />

自动完成组件：

<Autocomplete
                        id="combo-box-demo"
                        options={idx.name}
                        getOptionLabel={(option: {name: string}) => option.name}
                        style={{width: 300}}
                        renderInput={params => (
                          <TextField
                            {...params}
                            label="Combo box"
                            variant="outlined"
                          />

所以它应该从数字文本字段组件设置 id，然后将查询传递给自动完成组件？

Answer 1

我不知道 idx.name 的来源，但它似乎不是数组，而 Autocomplete 的属性 options 需要数组类型作为值。

您需要将 data.todo 传递给 Autocomplete 属性 options。

然后你必须让你的TextField组件由状态控制。

代码示例：

const Component = () => {
  const [id, setId] = useState(%INITIAL_VALUE_IF_NEEDED%);
  
  const { data } = useQuery(DATA, {
    variables: { id },
  });

  const handleId = id => setId(id);

  return (
    <Fragment>
     <TextField {...params}
       label="Combo box"
       variant="outlined"
       onChange={handleChange}
     />
     <Autocomplete
       id="combo-box-demo"
       options={data?.todo || []}
       getOptionLabel={(option: {name: string}) => option.name}
       style={{width: 300}}
       renderInput={params => (
         <TextField
           {...params}
           label="Combo box"
           variant="outlined"
         />
       )}
    </Fragment>
  );
}

然后每次在 useQuery 中更新 id 时，您将能够看到选项

将 graphql 变量传递给 Material UI 组件

Pass graphql variable to the Material UI component

apollo

reactjs

graphql

material-ui