Question

我正在尝试创建一个使用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;

Answer 1

我不明白这一点：

并且过滤器可以使用本地（当前）数据或在服务器中完成。

在您的示例中，您仅在客户端进行过滤。

我认为，最好的选择是将代码分为两个部分。

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

我在此处直接在堆栈溢出中编写了代码，这是拼写问题，您可以改善逻辑，我的想法是编写代码来回答您的问题

处理由Apollo React提取的数据

1 个答案: