将graphql变量传递给Material UI组件 [英] Pass graphql variable to the Material UI component

问题描述

我正在使用React Typescript，并且具有自动完成材料UI组件.我正在尝试将查询建议纳入自动完成"组件.

I'm using React Typescript and have a Autocomplete Material UI component. I'm trying to get query suggestions into Autocomplete component.

我的graphql查询如下:

My graphql queries looks like this:

查询定义:

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

我想创建一个自动完成组件，该组件将从文本字段组件获取一个数值并将其传递给自动完成材质ui组件?

I want to create a autocomplete component which will take a numeric value from the textfield component and pass it on to the autocomplete material ui component?

我的数字部分看起来像这样:

My numeric component looks like this:

 <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，然后将查询传递给自动完成组件?

So it should set id from the number textfield component and then pass the query to the autocomplete component?

推荐答案

我不知道idx.name的来源，但当 Autocomplete 的属性 options 需要数组类型作为值.

I don't know where idx.name comes from but it seems it is not an array while Autocomplete's property options requires an array type as a value.

您需要将 data.todo 传递到 Autocomplete prop options 中.

You need to pass data.todo into the Autocomplete prop options.

然后，您必须使TextField组件受状态控制.

Then you have to make your TextField component be controlled by state.

代码示例:

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

然后每当id在useQuery中更新时，您就可以看到选项

And then every time the id updates in the useQuery you will be able to see the options

这篇关于将graphql变量传递给Material UI组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！