Apollo：组件重新渲染之间的加载状态

Question

我有以下组件。

import React from 'react';
import { useQuery } from 'react-apollo-hooks';

import Table from 'components/Table';
import { useQueryParams } from 'customHooks';
import { LOCATIONS } from 'graphql/queries';

const useLocations = ({ filters, max, sorting }) => {
    const variables = { max, filters, sorting };
    return useQuery(LOCATIONS, { variables, fetchPolicy: 'network-only' });
};

const Search = ({ filters, sorting }) => {
    // Gets the value for the parameter "max" from the URL, with default 100
    const { max, updateURLParam } = useQueryParams({ max: 100 });

    const { data, error, loading } = useLocations({ filters, sorting, max });

    if (loading && !data.myData) return <div>Loading</div>;

    if (error) return <div>Error</div>;

    // Update the URL parameter "max"
    // Example
    // Before: https://localhost:3000/table?max=100
    // After: https://localhost:3000/table?max=200
    const handleReachBottom = () => updateURLParam({ max: max + 100 });

    return <Table.Locations data={data} onReachBottom={handleReachBottom} />;
};

export default Search;

我所期待的行为如下：

1. 显示“正在加载”
2. 显示包含数据的表格
3. 滚动到表格底部
4. 在获取新数据时，表格仍在显示中
5. 获取数据后，更新表

在我使用来自 apollo 的 Query component 之前，它的工作原理完全一样。但是当我切换到react-apollo-hooks 包时，行为变成了这个：

1. 显示“正在加载”
2. 显示包含数据的表格
3. 滚动到表格底部
4. 显示“正在加载”
5. 获取数据后，更新表

为什么会这样？

更新

这就是我之前使用它的方式：

import React from 'react';
import { Query } from 'react-apollo';


import Table from 'components/Table';
import useQueryParams from 'customHooks/useQueryParams';

const Locations = ({ filters, max, sorting, children }) => {
    const variables = { max, sorting };

    return (
        <Query {...{ variables }} query={LOCATIONS} fetchPolicy='network-only'>
            {children}
        </Query>
    );
};


const Search = ({ filters, sorting }) => {
    const { max, updateURLParam } = useQueryParams({ max: 100 });

    return (
        <MyClient.Locations {...{ filters, sorting, max }}>
            {({ data, loading, error }) => {
                if (loading && !data.myData) return <div>Loading</div>;

                if (error) return <div>Error</div>;

                const handleReachBottom = () => updateURLParam({ max: max + 100 });


                return (
                    <Table.Locations
                        data={data}
                        onReachBottom={handleReachBottom}
                    />
                );
            }}
        </MyClient.Locations>
    );
};

export default Search;

Answer 1

我之前在使用react-apollo-hooks 时遇到过这个问题，我觉得重新获取、变量和 fetchPolicy 的行为与标准 Apollo 略有不同。我从来没有深究过。

我解决它的方法是不要使用 loading 属性，而是使用数据本身的存在来决定要做什么。这种方法在重新获取时有效

const [data, setData] = useState(null)

const res = useLocations({ filters, sorting, max });

useEffect(() => {
  if (Object.keys(res.data || {}).length > 0) {
    setData(res.data)
  }
}, [res.data])

if (!data) return <div>Loading</div>