Nextjsでreact-queryのinvalidateQueriesがうまく動かない原因

以下のようなコードでinvalidateQueriesがうまく動かないことがありました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// _app.tsx

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
	const client = new QueryClient()

	return(
		<QueryClientProvider client={client}>
			<Component {...pageProps} />
		</QueryClientProvider>
	)

})

発生する状況はクエリストリングがついている時だったので調べてみると、クエリストリングがついていると以下のような動作をするようです。(https://nextjs.org/docs/advanced-features/automatic-static-optimization#how-it-works)

https://example.com?q=test にアクセスした場合

https://example.com でレンダリング
https://exmaple.com?q=test でレンダリング

よくわかっていないですがこうすることで効率的にレンダリングできるらしいです。
これによりMyAppが二度レンダリングされreact-queryのclientが二重に生成されることで諸々おかしなことになっていたようです。

解決策

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// _app.tsx

const client = new QueryClient()

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
	return(
		<QueryClientProvider client={client}>
			<Component {...pageProps} />
		</QueryClientProvider>
	)

})

としたらうまくいきました。