Apollo: состояние загрузки между повторными рендерингами компонента - PullRequest
Новая
       74

Apollo: состояние загрузки между повторными рендерингами компонента

0 голосов
/ 20 июня 2019

У меня есть следующий компонент. 

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. Когда данные извлекаются, таблица обновляется

До того, как я использовал компонент Query от Apollo, он работал именно так.Но когда я переключился на пакет реагировать-apollo-hooks , поведение изменилось на этот:

  1. Отображает «Загрузка»
  2. Отображает таблицу сdata
  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;

1 Ответ

0 голосов
/ 20 июня 2019

У меня раньше была эта проблема с 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>
...