路由上的NextJS Apollo“ queryData.ssrInitiated不是函数”错误

问题描述

我有一个页面items/[id]用于创建和编辑项目。我使用-1作为新项目的项目ID，以区分创建和编辑模式。它是一个功能组件，如下所示

const getItem = (id) => {
    if (id > 0) {
        return useQuery(GET_ITEM_DETAILS,{ variables: { id }})
    }
    return { loading: false,data: { product: {} } }
}

const itemForm = (props) => {
    const { loading,error,data } = getItem(props.id)

    /* RENDERING LOGIC*/
}

表单提交基于id值调用创建或更新突变。在创建突变的onCompleted处理程序中，我添加了一个路由器调用来更新ID，如下所示：

router.replace(`/items/[id]`,`/items/${id}`)

这种路由发生时，我在useQuery上收到错误消息。

Unhandled Runtime Error
TypeError: queryData.ssrInitiated is not a function

解决方法

由于React如何处理钩子和渲染而发生运行时错误。使用NextJS的template <typename... Ts> SomeClass(Ts...) -> SomeClass<std::common_type_t<Ts...>>; 尝试转换到同一页面而不重新加载它，这可能会导致router.replace()钩问题。

只需使用useQuery就可以解决问题：

window.location