NextJS Apollo“queryData.s-s-rInitiated is not a function”路由错误

Posted 2023-03-10

【中文标题】NextJS Apollo“queryData.s-s-rInitiated is not a function”路由错误

【英文标题】：NextJS Apollo "queryData.s-s-rInitiated is not a function" error on routing

【发布时间】：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.s-s-rInitiated is not a function

【参考方案1】：

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

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

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