我们正在使用 react 选择并在用户键入时获取项目。我无法让它与react-apollo 一起工作。
有人可以帮我提供指导吗?
这是我不成功的尝试:
class PatientSearchByPhone extends Component {
updateProp = mobile => {
if (mobile.length < 10) return;
this.props.data.refetch({ input: { mobile } });
};
render() {
console.log(this.props.data);
return <AsyncSelect cacheOptions loadOptions={this.updateProp} />;
}
}
const FETCH_PATIENT = gql`
query Patient($input: PatientSearchInput) {
getPatients(input: $input) {
id
first_name
}
}
`;
export default graphql(FETCH_PATIENT, {
options: ({ mobile }) => ({ variables: { input: { mobile } } })
})(PatientSearchByPhone);
版本:
"react-apollo": "^2.1.11",
“ react 选择”:“^2.1.0”
感谢您的宝贵时间。
最佳答案
我收到一封电子邮件,要求回复此问题。这让我想起了这部XKCD漫画:
我不记得我实现的确切解决方案,因此我为此设置了一个完整的示例。
只要您在输入框中输入 4 个或更多字符(您需要输入艺术家的姓名。尝试 vinci
?),此应用程序(下面的代码片段)就会开始搜索。这是代码:
import React, { useState } from "react";
import "./App.css";
import AsyncSelect from "react-select/async";
import ApolloClient, { gql } from "apollo-boost";
const client = new ApolloClient({
uri: "https://metaphysics-production.artsy.net"
});
const fetchArtists = async (input: string, cb: any) => {
if (input && input.trim().length < 4) {
return [];
}
const res = await client.query({
query: gql`
query {
match_artist(term: "${input}") {
name
imageUrl
}
}
`
});
if (res.data && res.data.match_artist) {
return res.data.match_artist.map(
(a: { name: string; imageUrl: string }) => ({
label: a.name,
value: a.imageUrl
})
);
}
return [];
};
const App: React.FC = () => {
const [artist, setArtist] = useState({
label: "No Name",
value: "https://dummyimage.com/200x200/000/fff&text=No+Artist"
});
return (
<div className="App">
<header className="App-header">
<h4>Search artists and their image (type 4 char or more)</h4>
<AsyncSelect
loadOptions={fetchArtists}
onChange={(opt: any) => setArtist(opt)}
placeholder="Search an Artist"
className="select"
/>
<div>
<img alt={artist.label} src={artist.value} className="aimage" />
</div>
</header>
</div>
);
};
export default App;
您可以克隆https://github.com/naishe/react-select-apollo这是一个可行的例子。我已在此处部署了该应用程序:https://apollo-select.naishe.in/ ,可以玩一下吗?
关于reactjs - React-Select 与 React-Apollo 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52695414/