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

Question

我将一个类组件转换为一个函数组件以使用 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

经过一些尝试，这是我的解决方案。正如 cmets 中所建议的，要多次触发相同的查询，我应该在 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
    }
}