fix(next): completely opts out of router cache

This commit is contained in:
Jacob Fletcher
2024-03-07 15:08:06 -05:00
parent c8322349a0
commit 3a557998d0
8 changed files with 34 additions and 35 deletions

View File

@@ -0,0 +1,17 @@
'use client'
import type React from 'react'
import { usePathname, useRouter } from 'next/navigation.js'
import { useEffect } from 'react'
export const ClearRouteCache: React.FC = () => {
const pathname = usePathname()
const router = useRouter()
useEffect(() => {
router.refresh()
}, [pathname, router])
return null
}

View File

@@ -10,11 +10,12 @@ import { deepMerge } from 'payload/utilities'
import React from 'react'
import 'react-toastify/dist/ReactToastify.css'
import { ClearRouteCache } from '../../elements/ClearRouteCache/index.js'
import { getPayload } from '../../utilities/getPayload.js'
import { getRequestLanguage } from '../../utilities/getRequestLanguage.js'
import { DefaultEditView } from '../../views/Edit/Default/index.js'
import { DefaultListView } from '../../views/List/Default/index.js'
import { DefaultCell } from '../../views/List/Default/Cell/index.js'
import { getPayload } from '../../utilities/getPayload.js'
import { DefaultListView } from '../../views/List/Default/index.js'
export const metadata = {
description: 'Generated by Next.js',
@@ -37,9 +38,9 @@ export const RootLayout = async ({
const payload = await getPayload({ config: configPromise })
const { cookies, user, permissions } = await auth({
payload,
const { cookies, permissions, user } = await auth({
headers,
payload,
})
const lang =
@@ -62,12 +63,13 @@ export const RootLayout = async ({
DefaultEditView,
DefaultListView,
config,
permissions: permissions,
permissions,
})
return (
<html dir={dir} lang={lang}>
<body>
<ClearRouteCache />
<RootProvider
componentMap={componentMap}
config={clientConfig}

View File

@@ -101,7 +101,7 @@ export const DefaultEditView: React.FC = () => {
// }
if (typeof onSaveFromContext === 'function') {
onSaveFromContext({
void onSaveFromContext({
...json,
operation: id ? 'update' : 'create',
})

View File

@@ -177,7 +177,7 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = (props) => {
setId(args.doc.id)
if (typeof onSaveFromProps === 'function') {
onSaveFromProps({
void onSaveFromProps({
...args,
collectionConfig,
})

View File

@@ -1,5 +1,4 @@
import { getTranslation } from '@payloadcms/translations'
import { useRouter } from 'next/navigation.js'
import React from 'react'
import { useConfig } from '../../providers/Config/index.js'
@@ -23,7 +22,7 @@ const Localizer: React.FC<{
const { i18n } = useTranslation()
const locale = useLocale()
const { dispatchSearchParams, searchParams } = useSearchParams()
const router = useRouter()
if (localization) {
const { locales } = localization
@@ -54,7 +53,6 @@ const Localizer: React.FC<{
locale: searchParams.locale,
},
})
router.refresh()
}}
>
{localeOptionLabel}

View File

@@ -7,7 +7,6 @@ export type { IComponentMapContext } from '../providers/ComponentMapProvider/ind
export { ConfigProvider, useConfig } from '../providers/Config/index.js'
export { CustomProvider } from '../providers/CustomProvider/index.js'
export { useDocumentEvents } from '../providers/DocumentEvents/index.js'
export { SetDocumentInfo } from '../providers/DocumentInfo/SetDocumentInfo/index.js'
export { useDocumentInfo } from '../providers/DocumentInfo/index.js'
export {
type DocumentInfo,

View File

@@ -1,24 +0,0 @@
'use client'
import { useRouter } from 'next/navigation.js'
import { useEffect } from 'react'
import type { DocumentInfo } from '../types.js'
import { useDocumentInfo } from '../index.js'
export const SetDocumentInfo: React.FC<DocumentInfo> = (props) => {
const { setDocumentInfo } = useDocumentInfo()
const router = useRouter()
const { id } = props
useEffect(() => {
setDocumentInfo(props)
}, [props, setDocumentInfo])
useEffect(() => {
router.refresh()
}, [router, id])
return null
}

View File

@@ -34,6 +34,7 @@ export const PreferencesProvider: React.FC<{ children?: React.ReactNode }> = ({
const config = useConfig()
const { user } = useAuth()
const { i18n } = useTranslation()
const {
routes: { api },
serverURL,
@@ -76,10 +77,12 @@ export const PreferencesProvider: React.FC<{ children?: React.ReactNode }> = ({
async (key: string, value: unknown, merge = false): Promise<void> => {
if (merge === false) {
preferencesRef.current[key] = value
await requests.post(
`${serverURL}${api}/payload-preferences/${key}`,
requestOptions(value, i18n.language),
)
return
}
@@ -93,9 +96,11 @@ export const PreferencesProvider: React.FC<{ children?: React.ReactNode }> = ({
) {
// merge the value with any existing preference for the key
newValue = { ...(currentPreference || {}), ...value }
if (isDeepEqual(newValue, currentPreference)) {
return
}
// add the requested changes to a pendingUpdate batch for the key
pendingUpdate.current[key] = {
...pendingUpdate.current[key],
@@ -113,6 +118,7 @@ export const PreferencesProvider: React.FC<{ children?: React.ReactNode }> = ({
if (isDeepEqual(pendingUpdate.current[key], preferencesRef.current[key])) {
return
}
// preference set in context here to prevent other updatePreference at the same time
preferencesRef.current[key] = pendingUpdate.current[key]
@@ -120,6 +126,7 @@ export const PreferencesProvider: React.FC<{ children?: React.ReactNode }> = ({
`${serverURL}${api}/payload-preferences/${key}`,
requestOptions(preferencesRef.current[key], i18n.language),
)
// reset any changes for this key after sending the request
delete pendingUpdate.current[key]
}