Graphql fetchMore не возвращает предыдущие результаты - PullRequest
Новая
       81

Graphql fetchMore не возвращает предыдущие результаты

0 голосов
/ 20 февраля 2020

Я приложение поверх Prisma и graphql на бэкэнде, и React на веб-интерфейсе, у меня есть список профилей и кнопка получения дополнительной информации,

вот компонент и запрос 

const List = () => {
    const [pagingFirst, setPagingFirst] = useState(9);
    const [pagingSkip, setPagingSkip] = useState(0);
    const { data, loading, loadMore, error } = useProfilesQuery(pagingFirst, pagingSkip);

    if (loading) return <Skeleton active paragraph title loading />;

    if (error) {
        return <p>`Error: ${error.message}`</p>;
    }

    const { profiles } = data;
    return (
        <>
            <div className="dicover-profiles-wrapper">
                <Row className="profiles-row">
                    {profiles &&
                        profiles.length > 0 &&
                        profiles.map((profile, i) => {
                            return (
                                <Col className="profile-card-wrapper">
                                    <ProfileCard loading={loading} profile={profile} />
                                </Col>
                            );
                        })}
                </Row>
            </div>
            <div className="footer">
                <Button
                    className="wf-btn-primary"
                    onClick={e => {
                        loadMore(18, 0);
                        setPagingSkip(pagingFirst);
                        setPagingFirst(pagingFirst + 9);
                        window.scrollTo(0, document.getElementById('app-page-wrapper-id').scrollHeight);
                    }}
                >
                    Load More
                </Button>
            </div>
        </>
    );
};

export default List;

и Запрос: 

const useProfilesQuery = (first, skip) => {
    const { data, loading, fetchMore } = useQuery(PROFILES_QUERY, {
        variables: { first, skip }
    });

    if (loading) return { loading, profiles: [] };

    const loadMore = (first, skip) => {
        return fetchMore({
            variables: { first, skip },
            updateQuery: (previousResult, x) => {
                const { fetchMoreResult } = x;
                const newProfiles = fetchMoreResult.profiles;
                return newProfiles.length
                    ? {
                            profiles: [ ...newProfiles, ...previousResult.profiles]
                      }
                    : previousResult;
            }
        });
    };
    return {
        data: data,
        loading,
        loadMore: loading ? () => {} : loadMore
    };
};

export default useProfilesQuery;

Проблема, которая у меня возникла, в первый раз она будет правильно получать данные, но когда я нажму на кнопку «Загрузить еще», она получит новые данные с сервера, что правильно, но старые данные, которые должны храниться в переменной previousResult, являются пустым списком! Таким образом, я не могу добавить новые элементы на страницу, он удалит старые элементы и отобразит новые.

Хммм, я новичок в graphql, не уверен, что проблема связана с хранить данные в локальном кеше или нет. Любая помощь приветствуется!

...