React Apollo GraphQL 搜索/过滤器

Posted 2023-03-10

【中文标题】React Apollo GraphQL 搜索/过滤器

【英文标题】：React Apollo GraphQL Search/Filter

【发布时间】：2019-04-10 04:01:12

【问题描述】：

我有一个使用 Apollo 客户端的带有 GraphQL 服务器的 React 项目。我试图弄清楚如何根据搜索文本和过滤选择更改查询结果。如果有人可以查看我的代码并给我一些帮助，我将不胜感激。对不起所有的代码，我想也许这一切都可能是相关的。

服务器/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;

client/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;

【问题讨论】：

请将您的代码发布在在您的问题中，而不是在外部链接中

【参考方案1】：

您的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
        )
    
;

【讨论】：

你是一个救生员，伙计！太感谢了！我知道这与解析器有关，只是不知道该怎么做。

哈哈，对了！乐于助人

对不起，还有一件事。所以，我就像你说的那样做了解析器，它适用于一个字段（即标题）的搜索框。如何将多个字段与 args.search 进行比较，以便搜索查看多个字段？如果我想在搜索栏中包含过滤器下拉菜单，这也会起作用吗？抱歉，这实际上是两件事。

@Leebs 您必须在解析器中添加该逻辑。例如，使用您现有的查询，您的解析器 args 将有两个键，args.search 和 args.filters。因此，根据您希望搜索执行的方式，您需要在解析器中编写该逻辑（例如，搜索和过滤器是否应该与 AND/OR 结合使用？）。例如，如果您想对搜索进行粗略的包含搜索，并且与过滤器上的完全匹配 - 您需要在地图中执行类似的操作：class.title.includes(args.search) && (args.filters.teacher === class.teacher) && ..

非常感谢。对于其他需要帮助的人，查看多个搜索字段以及过滤器下拉列表的解决方案是 classes.filter(class=> (class.title.toLowerCase().includes(args.search) || class.description。 toLowerCase().includes(args.search)) && class.teach.toLowerCase() === args.teacher.toLowerCase() && ...)。请注意搜索框 OR 周围的括号。