reactjs - React Apollo GraphQL 搜索/过滤

Question

我有一个带有使用 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}`)
);

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

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