NextJS Apollo "queryData.ssrInitiated is not a function" error on routing

Question

I have a page items/[id] for creating and editing items. I use -1 as item id for new items to differentiate create and edit mode. It is a functional component and looks like below

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*/
}

Form submit invokes either a create or update mutation based on id value. In the onCompleted handler of the create mutation I have added a router call to update the id as below:

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

When this routing happens I get an error on the useQuery .

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

Answer 1

The Runtime Error is occurring because of how React handles hooks and rendering. Using NextJS's router.replace() attempts to transition into the same page without reloading it, possibly causing issues with the useQuery hook.

Simply using window.location should solve the issue:

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