Как фильтровать элементы, используя React, Graphql и Apollo с es6 - PullRequest
Новая
       2

Как фильтровать элементы, используя React, Graphql и Apollo с es6

0 голосов
/ 29 января 2020

У меня есть проект React с GraphQL с использованием клиента Apollo. Я пытаюсь выяснить, как изменить результат запроса на основе текста поиска. Я реализовал поиск запросов в бэкэнде, и он работает отлично. Но я не знаю, как настроить фильтр в React, используя тот же запрос. Несмотря на то, что существует метод обучения фильтрации https://www.howtographql.com/react-apollo/7-filtering-searching-the-list-of-links/, он не использует ES6, и я буквально не знаю, как это сделать. Я застрял на этом фильтре около 10 дней.

Я покажу вам мой код.

Приложение. js 

import React from 'react';
import HeroesDota from './components/HeroesDota';
import Search from './components/HeroSearch'

import { ApolloProvider } from '@apollo/react-hooks';

import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";


const cache = new InMemoryCache();
const link = new HttpLink({
  uri: "http://localhost:8000/graphql/"
});

const client = new ApolloClient({
  cache,
  link
});


const App = () => {

return (
    <ApolloProvider client={client}>
      <Search />
      <HeroesDota />
    </ApolloProvider>
)};

export default App;

HeroesDota. js (compoenent) 

import React from 'react'
import gql from "graphql-tag";
import { useQuery } from '@apollo/react-hooks';
import '../index.css'
import styled from 'styled-components';

const Images = styled.img`
    margin:0;
    border: 3px solid #288eea;
    display: inline;
    width: 90px;
    height: 50px;
`
const HEROES_DOTA2 = gql`
    query {
        heroes {
            name
            heroType
            image
        }
    }
`;


const HeroesDota = () => {
    const { loading, error, data } = useQuery(HEROES_DOTA2);

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;

    return data.heroes.map(({name, heroType, image }) => (
      <div className="row" key={Math.random() + 1}>
        <div className="column">
          <button className="button-hero"><Images className="hero_images" src= {`${image}`} alt={name}></Images></button>
            <div className="hero_info">{name} - {heroType}</div>
        </div>
      </div>

    ));
}

export default HeroesDota;

HeroSearch. js (компонент, который работает не так, как я ожидал) 

import React, { useState } from 'react'
import gql from "graphql-tag";
import { withApollo } from 'react-apollo'
import Hero from './HeroesDota'
import '../index.css'

 const SEARCH_HEROES = gql`
     query ($search: String) {
         heroes (search: $search) {
             id
             name
         }
     }
 `;

const Search = () => {

    const [heroes, setHeroes] = useState([])
    const [search, setSearch] = useState('')


    const _executeSearch = async () => {
        const { search } = search
        const result = await this.props.client.query({
          query: SEARCH_HEROES,
          variables: { search },
        })
        const heroes = result.data.heroes.name
        setHeroes({ heroes })
    }

    return (
        <div>
          <div>
            Search
            <input
              type='text'
              onChange={e => setSearch({ search: e.target.value })}
            />
            <button onClick={() => _executeSearch()}>OK</button>
          </div>
          {heroes.map((hero, index) => (
            <Hero key={hero.id} hero={hero} index={index} />
          ))}
        </div>
      )
    }

export default withApollo(Search)

После того, как вы нажмете кнопку OK, чтобы продолжить поиск, я получаю следующую ошибку. Необработанный отказ (ReferenceError): Невозможно получить доступ к «поиску» до инициализации.

Если я пытаюсь сделать что-то подобное, как я делал в Component HeroesDota, я все равно не могу это сделать.

Кто-нибудь знает, как это сделать? фильтруйте запрос в React, используя es6, а не компонент на основе классов, как это было в этом руководстве.

Спасибо

1 Ответ

0 голосов
/ 29 января 2020 
const Search = (props) => {
    props.client.query()
    ...
}

или 

const Search = ({ client }) => {
    client.query()
    ...
}

Хотя я бы также рекомендовал использовать новый синтаксис ловушек.

...