Reaction Apollo GraphQL搜索/筛选 [英] React Apollo GraphQL Search/Filter
本文介绍了Reaction Apollo GraphQL搜索/筛选的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个使用Apollo客户端的GraphQL服务器的Reaction项目。我正在试图弄清楚如何根据搜索文本和过滤选择来更改查询结果。如果有人能看一下我的代码并给我一些帮助，我会非常感激的。对于所有代码，我深表歉意，我想这可能都是相关的。
server/index.js
const resolvers = {
Query: {
getClasses: () => classes,
searchClasses: () => classes
},
};
const server = new ApolloServer({ typeDefs, resolvers });
const app = express();
app.use(cors());
app.use(bodyParser.text({ type: 'application/graphql' }));
server.applyMiddleware({ app });
app.listen({ port: 4000 }, () =>
console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);
server/schema.js
const typeDefs = `
type Class {
entry_id: ID!
title: String
url: String
thumb: String
duration: [String]
style: [String]
intensity: [String]
anatomical_focus: [String]
level: [String]
teacher: [String]
authorId: Int
live_start: Int
live_end: Int
type: String
logged_in_member_id: Int
favorite: Boolean
favorite_order: Int
favorited_on: Int
body_snippet: String
}
input Filters {
teacher: String
duration: String
level: String
style: String
anatomy: String
}
type Query {
getClasses: [Class]!
searchClasses(search: String, filters: Filters): [Class]!
}
`;
module.exports = typeDefs;
客户端/src/index.js
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql',
cache: new InMemoryCache()
});
ReactDOM.render(
<ApolloProvider client={client}>
<Header />
<Router>
<Route exact path='/' component={App}/>
</Router>
</ApolloProvider>,
document.getElementById('root')
);
serviceWorker.unregister();
查询/搜索
const SEARCH_CLASSES = gql`
query SearchClasses($search: String, $filters: Filters) {
searchClasses(search: $search, filters: $filters) {
entry_id
title
url
thumb
duration
style
intensity
level
teacher
body_snippet
}
}
`;
client/src/pages/Classes.js
class Classes extends Component {
constructor(props) {
super(props);
this.state = { keyword: '', filters: { teacher: '', duration: '', level: '', style: '', anatomy: '' } };
this.setSearch = this.setSearch.bind(this);
this.setFilters = this.setFilters.bind(this);
}
setSearch(e) {
this.setState({
keyword: e.target.value
});
}
setFilters(e) {
this.setState({
filters: e.target.value
})
}
componentDidMount() {
var ddToggle = document.querySelectorAll('.dropdown-toggle');
ddToggle.forEach(function (dd) {
dd.addEventListener("click", function(ev) {
dd.nextSibling.classList.toggle('show');
});
});
}
render() {
let text = this.state.keyword;
let teacher = this.state.filters.teacher;
let duration = this.state.filters.duration;
let level = this.state.filters.level;
let style = this.state.filters.style;
let anatomy = this.state.filters.anatomy;
return (
<Query
query={Queries.Search}
variables={{
search: text,
filters: {
teacher: '',
duration: '',
level: '',
style: '',
anatomy: ''
}
}}>
{({ loading, error, data }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: ${error}</p>;
return (
<div>
<section className="ygi-search">
<div className="container px-3">
<div className="ygi-search__wrapper">
<SearchBar handleSearch={this.setSearch} search={ text } />
<button className="ygi-search__filter-btn mx-auto mb-2 " aria-label="Shows Filters">Show Filters</button>
<div className="yi-dropdowns__wrapper-visibility col-lg-10 ">
<div className="row">
<TeachersDD handleSelect={this.setFilters} selection={ teacher } />
<DurationDD handleSelect={this.setFilters} selection={ duration } />
<LevelDD handleSelect={this.setFilters} selection={ level } />
<StyleDD handleSelect={this.setFilters} selection={ style } />
<AnatomyDD handleSelect={this.setFilters} selection={ anatomy } />
</div>
</div>
</div>
</div>
</section>
<div className="flex">
{data.searchClasses.map(single => (
<Class class={single} key={single.entry_id} />
))}
</div>
</div>
)
}}
</Query>
);
}
}
export default Classes;
client/src/components/Search.js
class SearchBar extends Component {
render() {
return (
<div className="ygi-search-bar col col-12 col-lg-2">
<div className="ygi-search-bar__wrapper mt-2">
<input onChange={this.props.handleSearch} placeholder="Search" value={this.props.search} type="text" className="ygi-search-bar__input" />
<a href="true" className="icon-wrapper ygi-search-bar__icon-wrapper" style={{ bottom: "calc(50%)" }}>
<svg role="presentation" className="icon-search-grey">
<use xlinkHref="#icon-search-grey"></use>
</svg>
</a>
</div>
</div>
);
}
}
SearchBar.propTypes = {
handleSearch: PropTypes.func,
text: PropTypes.string
};
export default SearchBar;
推荐答案
看起来问题出在searchClasses查询的解析程序上。根据您问题中的代码判断，您的解析器将始终返回相同的内容(classes)：
const resolvers = {
Query: {
getClasses: () => classes,
searchClasses: () => classes // always returning all classes!
}
};
search字符串过滤类。试着这样做(我不知道您的类数据结构是什么样子的，所以我在这里只是猜测)：
const resolvers = {
Query: {
getClasses: () => classes,
searchClasses: (obj, args, context, info) => classes.filter(
class => class.title === args.search
)
}
};
这篇关于Reaction Apollo GraphQL搜索/筛选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
