使用 Apollo React 获取的数据答案

【问题标题】：Working with data fetched by Apollo React使用 Apollo React 获取的数据
【发布时间】：2019-05-08 20:05:02
【问题描述】：

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

【问题讨论】：

你能做一些像handleSearchTermChangeLocal => data => searchTerm => {...} 这样的事情，以便在你的渲染方法中传递数据吗？ onSearchTermChange={handleSearchTermChange(data)}
所以即使我们在做客户端过滤器也可以在每个渲染中查询？
Apollo 的 <Query /> 渲染道具根据定义存在于您的渲染方法中。我认为如果您担心的话，不要在每次渲染时重新获取数据就足够聪明了。一般来说，React 正朝着在渲染中包含代码逻辑的方向发展，比如 React Hooks API。

标签： reactjs react-apollo

【解决方案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}
            />
        );
    }
}

我这里的代码是直接堆栈溢出写的，是拼写问题，你可以改进逻辑，我这里的想法只是写代码来回答你的问题

【讨论】：