Попытка управлять двумя поисковыми запросами с одним входом в React и Apollo - PullRequest
Новая
       15

Попытка управлять двумя поисковыми запросами с одним входом в React и Apollo

0 голосов
/ 09 марта 2019

узел: v10.15.2 реагируют: «^ 16.8.3», Реакция-Аполлон: "^ 2.5.2", Реакт-дом: "^ 16.8.3",

Я могу заставить работать один фильтр, но не могу найти лучший способ разделения значений, чтобы оба фильтра не равнялись.

Я пытался использовать вложенные запросы безрезультатно. 

import React, { Component } from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import Cocktail from "../Cocktail";
import styles from "./styles.module.css";

const GET_COCKTAIL_NAMES = gql`
  query DrinksQuery($sort: String, $where: JSON) {
    cocktails(sort: $sort, where: $where) {
      _id
     name
     ingredients
    }
  }
`;

class CocktailList extends Component {
  state = {
    data: {
      cocktails: []
    }
  };

  filterList = event => {
    const typedWord = event.target.value
    this.setState({
      data: {
        // ingredients_contains: typedWord,
        name_contains: typedWord
      }
    });
  };

  render() {
    return (
      <section className={styles.list}>
        <form>
          <fieldset>
            <label>
              <span className="visually-hidden">
                Filter by name or search by ingredient
              </span>
              <input
                type="text"
                className="Search"
                placeholder="Filter by name or search by ingredient"
                onChange={this.filterList}
              />
            </label>
          </fieldset>
        </form>
        <Query
            query={GET_COCKTAIL_NAMES}
            variables={{
              sort: "name: ASC",
              where: {
                // name_contains: this.state.data.name_contains,
                ingredients_contains: 
this.state.data.ingredients_contains
              }
            }}
          >

          {({ loading, error, data }) => {
            if (loading) return null;
            if (error) return `Error: ${error}`;
            return (
              <div>
                {data.cocktails.map(({ name, _id, ingredients }) => {
                  return (
                    <Cocktail
                      key={_id}
                      id={_id}
                      name={name}
                      ingredients={ingredients}
                    />
                  );
                })}
              </div>
            );
          }}
        </Query>
      </section>
    );
  }
}

export default CocktailList;

У меня есть рабочая ветвь, использующая REST и axios по адресу https://cocktail -list-client.herokuapp.com / , но я хотел бы перейти на Apollo и graphql в качестве учебного упражнения. Любая помощь очень ценится. Спасибо!

...