Работа с данными, полученными Apollo React - PullRequest
Новая
       6

Работа с данными, полученными Apollo React

0 голосов
/ 07 декабря 2018

Я пытаюсь создать компонент, который извлекает данные, используя Apollo.И компонент имеет функцию поиска / фильтрации.И фильтр может быть сделан с локальными (текущими) данными или на сервере.Я не уверен, как справиться с обеими функциями с помощью Apollo.С Redux я мог отправить два отдельных действия, которые в конце концов обновили бы данные в хранилище Redux.Но я не уверен, как получить доступ к данным в Apollo, чтобы сделать фильтрацию локально (в клиенте).

Вот упрощенная версия моего компонента 

import React, { Component } from 'react';
import { Query } from 'react-apollo';
import AnotherComponent from './AnotherComponent';

class MyComponent extends Component {
    state = {
        searchTerm: '',
        data: [],
    }

    filterData = () => {
        // some sort of filtering. No issue with this.
    }

    handleSearchTermChangeLocal = searchTerm => {
        const data = this.filterData([howToGetDataFromApollo], searchTerm);
        this.setState({ data, searchTerm });
    }

    render() {
        const { query, variables } = this.props;

        return (
            <Query query={query} variables={variables}>
                {({ loading, data, error }) => (
                    <AnotherComponent
                        {...this.props}
                        isLoading={loading}
                        data={data}
                        error={error}
                        onSearchTermChange={handleSearchTermChange}
                    />
                )}
            </Query>
        );
    }
}

export default MyComponent;

1 Ответ

0 голосов
/ 08 декабря 2018

Я не понял этого:

И фильтр может быть сделан с локальными (текущими) данными или на сервере.

В вашем примере вытолько делая фильтр на стороне клиента.

На мой взгляд, лучший вариант для вас - разделить код на два компонента. 

import React, { Component } from 'react';
import { Query } from 'react-apollo';
import Filter from './Filter';

function MyComponent() {
    render() {
        const { query, variables } = this.props;

        return (
            <Query query={query} variables={variables}>
                {({ loading, data, error }) => (
                    <Filter
                        {...this.props}
                        isLoading={loading}
                        data={data}
                        error={error}
                    />
                )}
            </Query>
        );
    }
}

Компонент фильтра: 

import AnotherComponent from './AnotherComponent';

filterData = () => {
    // some sort of filtering. No issue with this.
}

class Filter extends Component {
    state = {
        searchTerm: '',
        data
    }

    static getDerivedStateFromProps(props, state) {
        return { data: filterData(props.data, state.searchTerm };
    }

    handleSearchTermChangeLocal = searchTerm => {
        const data = filterData(this.state.data, searchTerm);
        this.setState({ data, searchTerm });
    }

    render() {
        return (
            <AnotherComponent
                 {...this.props}
                 data={this.state.data}
                 onSearchTermChange={handleSearchTermChange}
            />
        );
    }
}

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

...