React-query with NextJs routing

Question

I have a page with few queries and it's all working until I update the URL params and then react-query stops working and also disappear from dev-tools.

When I click on a row it triggers the handleRowClick function which update the URL with params, and then react query stops working.

1.First Image

2.Clicking on a row ( Update URL params ) Second Image

const Volumes: NextPage = () => {
const apiRef = useGridApiRef()

const [volumes, setVolumes] = useState<IDataset[] | undefined>(undefined)
const [isOpen, setOpen] = useState(false)
const [rightWingData, setRightWingData] = useState<IDataset | undefined>(undefined)
const [searchValue, setSearch] = useState('')
const [volumeId, setVolumeId] = useState('')

const { isLoading, data } = useVolumeData()
const { isLoading: searchIsLoading, data: searchData } = useSearchVolumes(searchValue)
const { isLoading: volumeByIdLoading, data: volumeByIdData } = useVolumeDataById(volumeId)

const router = useRouter()

useEffect(() => {
    if(router.isReady && router.query?.id && !rightWingData){
        const volumeId = router.query.id.toString()
        setVolumeId(volumeId)
    }

    if (!isLoading && data && !searchData) {
        setVolumes(data.data.result)
    }
    else if (!searchIsLoading) {
        setVolumes(searchData)
    }

    if(!volumeByIdLoading && volumeByIdData){
        showVolumeData(volumeByIdData)
    }
}, [data, isLoading, searchIsLoading, searchData, isOpen, rightWingData, volumeByIdLoading, volumeByIdData])


const handleRowClick = (rowData: IRowData) => {
    showVolumeData(rowData.row)
    Router.push({
        pathname: '/volumes',
        query: { id: rowData.row.id},
    })
}

const showVolumeData = (volumeData: IDataset) => {
    apiRef.current.updateColumns(thinColumns)
    setRightWingData(volumeData)
    setOpen(true)
    setVolumeId('')
}

const closeRightWing = () => {
    setOpen(false)
    Router.push('/volumes')
    apiRef.current.updateColumns(columns)
}

if (isLoading || !volumes) return <h1>Is Loading...</h1>

return (
    <div className={`volumes ${isOpen ? "open" : "close"}`}>
        <div className="volumes-table">
            <InfTable setSearch={setSearch} searchValue={searchValue} apiRef={apiRef}
                rows={volumes} columns={columns} initialState={initialState} onRowClick={handleRowClick} />
        </div>
        {rightWingData &&
            <div className="right-wing-wrapper" >
                <VolumeRightWing volume={rightWingData} onClose={closeRightWing} />
            </div>
        }
    </div>
)

}

function MyApp({ Component, pageProps }: AppProps) {
const queryClient = new QueryClient()

return (
    <QueryClientProvider client={queryClient}>
        <Layout>
            <Component {...pageProps} />
            <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
        </Layout>
    </QueryClientProvider>
)

}

you need to show us some code please, otherwise, it is impossible to help. — TkDodo
– TkDodo, Commented Apr 10, 2022 at 11:27
Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Apr 10, 2022 at 23:07
Can you show where / how the queryClient is created? I have a hunch that an unstable client could be the cause. — TkDodo
– TkDodo, Commented Apr 11, 2022 at 7:17
@TkDodo - The problem was that the queryClient was created inside the component every-time it rerenders, so I moved it outside the component. However I wonder why every time the URL changes it rerenders the entire App. Is there a way to prevent it in next.js? — Lior Zelitchenok
– Lior Zelitchenok, Commented Apr 11, 2022 at 7:41

TkDodo · Accepted Answer · 2022-04-11 18:40:32Z

4

as shown in the code, you are re-creating a new QueryClient inside the App component:

function MyApp({ Component, pageProps }: AppProps) {
  const queryClient = new QueryClient()

which means that every time the App re-renders, you throw away the Query Cache (which is stored inside the client).

This is likely what happens when you change the route params. If you cannot create the client outside of MyApp (e.g. because you are using server-side rendering), it is advised to create a stable client:

function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = React.useState(() => new QueryClient())

this is also shown in the SSR docs.

answered Apr 11, 2022 at 18:40

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lior Zelitchenok Over a year ago

I created the client outside of the App component and it works. The problem was that when the URL changes next.js rerenders the App component.

asi hej Over a year ago

@LiorZelitchenok Thanks, extracting create of QueryClient instance fixed this.

Collectives™ on Stack Overflow

React-query with NextJs routing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related