使用 apollo 客户端 fetchMore Apollo Client 多次触发相同的查询并附加数据

Question

我将 class 组件转换为函数组件以使用 React Hooks。 graphQl 查询调用如下：

const { data, error, loading, fetchMore } = useQuery(getAll, {
            variables: { 
                code: props.code,
                type: props.type,
                page: 0 
            }
        });

fetchMore 函数正是我要找的。我检查了几个教程，它们都在 onClick 触发器上实现了 fetchMore 功能。

我的问题是：

是否可以在不触发事件的情况下调用 fetchMore？以便在设置变量时有条件地调用它？

更新 1

按照建议，我尝试了 useEffect 挂钩。这是代码：

useEffect(() => {
        if(data != null) {
            const { nextLink } = data.list.nextLink;

            if(nextLink !== []){
                fetchMore({
                    variables: { 
                        code: props.code,
                        type: props.type,
                        page: page+1  
                    },
                    updateQuery: (prevResult, { fetchMoreResult }) => {
                      fetchMoreResult.list = [
                        ...prevResult.list,
                        ...fetchMoreResult.list
                      ];
                      return fetchMoreResult;
                    }
                });
            }
        }
    });

但是它只调用一次查询。如何多次触发该查询，直到 nextLink 不为空？然后更新结果？

更新 2

经过一些工作后，我能够调用所有页面并获取数据。这是我所做的。

我在后端查询中添加了page字段，作为一个变量来回传递给查询调用。此外，这个页面变量在每次调用时都会增加。此外，仅当 nextLink 为空时才会调用 fetchmore 函数。但是目前页面只显示最后一页的结果，因为新的结果会取代旧的数据。

代码如下：

let [hasNext, setHasNext] = useState(true);
    useEffect(() => {
            if(data != null) {
                const { nextLink, page } = data.list;
                let isNext = (nextLink !== "") ? true : false;
                setHasNext(isNext);
    
                if(hasNext){
                    const { data } = fetchMore({
                        variables: { 
                            code: props.code,
                            type: props.type,
                            page: parseInt(page)
                        },
                        updateQuery: (prevResult, { fetchMoreResult }) => {
                            fetchMoreResult = {
                                ...prevResult,
                                ...fetchMoreResult,
                            };
                            return fetchMoreResult;
                        }
                    });
                }
            }
        });

展开运算符似乎不起作用。如何将获取的新数据附加到旧结果？

Answer 1

经过一些尝试，这是我的解决方案。正如评论中所建议的那样，要多次触发相同的查询，我应该在 useEffect 挂钩中使用 fetchMore。

代码如下：

useEffect(() => {
        if(data != null) {
            if(data.list !== []){
                const { nextLink, page } = data.list;
                let isNext = (nextLink !== "") ? true : false;
                setHasNext(isNext);

                if(hasNext && page != null){
                    const { data } = fetchMore({
                        variables: { 
                            code: props.code,
                            type: props.type,
                            page: page
                        },
                        updateQuery: (prev, { fetchMoreResult }) => {
                            if (!fetchMoreResult) {
                                return prev;
                            }
                            return {
                                list: {
                                    ...prev.list,
                                    ...fetchMoreResult.list,
                                    array: [
                                        ...prev.list.array,
                                        ...fetchMoreResult.list.array,
                                    ],
                                },
                            };
                        }
                    });
                } else {
                    setLoadingState(false);
                }
            }
        }
    });

graphQL查询如下：

query($code: String, $type: Int, $page: Int) {
    list(code: $code, type: $type, page: $page) {
        array {
            ID
            title
            field_firstname
            field_lastname
        }
        nextLink
        page
    }
}

使用 apollo 客户端 fetchMore Apollo Client 多次触发相同的查询并附加数据

Trigger same query multiple times with apollo client fetchMore Apollo Client and append the data

reactjs

graphql

react-apollo

apollo-client