阿波罗:组件重新呈现之间的加载状态

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. 获取数据时，表将被更新。

在我使用阿波罗的查询组件之前，它就是这样工作的。但是，当我切换到反应-阿波罗钩包时，行为就改变了：

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的行为与标准的阿波罗有着微妙的不同。我从来没搞清楚到底。

我绕开它的方式是，不要使用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>