NextJS Apollo“queryData.ssrInitiated is not a function”路由错误答案

【问题标题】：NextJS Apollo "queryData.ssrInitiated is not a function" error on routingNextJS Apollo“queryData.ssrInitiated is not a function”路由错误
【发布时间】：2020-12-11 01:53:33
【问题描述】：

我有一个页面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

【问题讨论】：

标签： reactjs next.js apollo react-apollo react-apollo-hooks

【解决方案1】：

运行时错误的发生是因为 React 处理钩子和渲染的方式。使用 NextJS 的 router.replace() 会尝试在不重新加载的情况下转换到同一页面，这可能会导致 useQuery 挂钩出现问题。

只需使用window.location 即可解决问题：

window.location.replace(`/items/${id}`)

【讨论】：