react-queryでSSR/SSG

queryKeyが完全に一致していないといけない

queryKeyにoptionalなものを含んでいる時に注意

例

code:ts

export async function getStaticProps() {

const queryClient = new QueryClient()

await queryClient.prefetchQuery('posts', getPosts)

return {

props: {

dehydratedState: dehydrate(queryClient),

},

}

}

tips

SSGにしたときとそうでないときの、queryやstale部分の差異がわからん

ssgにしたときに、cacheはどうなっているのか

度のタイミングでqueryは古くなったとみなされるのか

ssgしていないときと同じ7日そうでないのか

SSGした場合、clientで初期読み込みしたときは

isFetching:false

isLoading:false

になっている

2つの方法がある

簡単に使える

Has some caveats

別にめちゃくちゃ普通のやりかただな

react-query固有の話は殆どない

デメリット

There is no way to know at what time the query was fetched on the server, so dataUpdatedAt and determining if the query needs refetching is based on when the page loaded instead

これに関しては、react-query使っていないときと同じ

ページを読み込んだときが初めてrefetchしたタイミングになる

Prefetch the query on the server, dehydrate the cache and rehydrate it on the client

clientで若干セットアップしないといけない

serverでprefetchしたときの、updatedAtが継続される？

例えば、staleTimeが10minのとき、どういう挙動になる？

serializeの箇所でエラーしていた

code:ts

return {

props: {

dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient)))

},

revalidate: REVALIDATE_TIME_SHORT

};