create-nextjs-cms 0.8.10 → 0.9.0

package/templates/default/app/providers.tsx

@@ -1,152 +1,152 @@
-'use client'
-
-import { QueryClient, QueryClientProvider, defaultShouldDehydrateQuery } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { ModalProvider } from '@/context/ModalProvider'
-import { trpc } from '@/app/_trpc/client'
-import { httpBatchLink, loggerLink } from '@trpc/client'
-import SuperJSON from 'superjson'
-import { useState } from 'react'
-import { getCsrfToken, SessionProvider, refreshTokenLink } from 'nextjs-cms/auth/react'
-import { Session } from 'nextjs-cms/auth'
-
-function MakeTrpcClient() {
-    const [trpcClient] = useState(() =>
-        trpc.createClient({
-            links: [
-                /**
-                 * The refresh token link will automatically refresh the access token if it's expired.
-                 * It fetches the new access token using the refresh token by calling the `/api/auth/refresh` endpoint.
-                 */
-                refreshTokenLink(),
-                /**
-                 * The logger link will log all the operations that are being sent to the server.
-                 * @see https://trpc.io/docs/client/links/loggerLink
-                 */
-                loggerLink({
-                    enabled: (op) =>
-                        process.env.NODE_ENV === 'development' ||
-                        (op.direction === 'down' && op.result instanceof Error),
-                }),
-
-                /**
-                 * The HTTP batch link is used to send multiple operations in a single HTTP request,
-                 * but doesn't wait for all the responses of the batch to be ready,
-                 * and streams the responses as soon as any data is available.
-                 * @see https://trpc.io/docs/client/links/httpBatchStreamLink
-                 *
-                 * TODO: The stream link is somehow causing empty responses before the actual response!
-                 */
-                /*unstable_httpBatchStreamLink({
-                    transformer: superjson,
-                    url: '/api/trpc',
-                    // You can pass any HTTP headers you wish here
-                    async headers() {
-                        const headers = new Headers()
-                        headers.set('x-trpc-source', 'nextjs-react')
-                        headers.set('Authorization', `Bearer ${authStore.state.accessToken}`)
-                        return headers
-                    },
-                }),*/
-
-                /**
-                 * The HTTP batch link is used to send multiple operations in a single HTTP request.
-                 * @see https://trpc.io/docs/client/links/httpBatchLink
-                 */
-                httpBatchLink({
-                    transformer: SuperJSON,
-                    url: '/api/trpc',
-                    // You can pass any HTTP headers you wish here
-                    async headers(op) {
-                        const headers = new Headers()
-                        /**
-                         * Check if there are any mutations in the operations list
-                         */
-                        if (op.opList.some((o) => o.type === 'mutation')) {
-                            /**
-                             * Get the CSRF token, and set it in the headers
-                             */
-                            const csrfToken = await getCsrfToken()
-                            headers.set('x-csrf-token', csrfToken)
-                        }
-
-                        headers.set('x-trpc-source', 'nextjs-react')
-
-                        return headers
-                    },
-                }),
-            ],
-        }),
-    )
-
-    return trpcClient
-}
-
-function createQueryClient() {
-    return new QueryClient({
-        defaultOptions: {
-            queries: {
-                // With SSR, we usually want to set some default staleTime
-                // above 0 to avoid refetching immediately on the client
-                /**
-                 * It's better to leave the staleTime to 0 to always fetch the latest data in a cms
-                 */
-                // staleTime: 3 * 1000,
-                /**
-                 * We want to refetch on window focus in development only
-                 */
-                refetchOnWindowFocus: process.env.NODE_ENV === 'development' ? true : false,
-                retry: 1, // default: 3
-            },
-            dehydrate: {
-                serializeData: SuperJSON.serialize,
-                shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
-            },
-            hydrate: {
-                deserializeData: SuperJSON.deserialize,
-            },
-        },
-    })
-}
-
-let browserQueryClient: QueryClient | undefined = undefined
-
-function getQueryClient() {
-    if (typeof window === 'undefined') {
-        // Server: always make a new query client
-        return createQueryClient()
-    } else {
-        // Browser: make a new query client if we don't already have one
-        // This is very important so we don't re-make a new client if React
-        // suspends during the initial render. This may not be needed if we
-        // have a suspense boundary BELOW the creation of the query client
-        if (!browserQueryClient) browserQueryClient = createQueryClient()
-        return browserQueryClient
-    }
-}
-
-export default function Providers({ children, session }: { children: React.ReactNode; session: Session | undefined }) {
-    // NOTE: Avoid useState when initializing the query client if you don't
-    //       have a suspense boundary between this and the code that may
-    //       suspend because React will throw away the client on the initial
-    //       render if it suspends and there is no boundary
-    const queryClient = getQueryClient()
-    // const trpcClient = getTrpcClient()
-    const trpcClient = MakeTrpcClient()
-
-    return (
-        <QueryClientProvider client={queryClient}>
-            <trpc.Provider client={trpcClient} queryClient={queryClient}>
-                <SessionProvider
-                    session={session}
-                    refetchOnWindowFocus={false}
-                    refetchInterval={0}
-                    refetchWhenOffline={false}
-                >
-                    <ModalProvider>{children}</ModalProvider>
-                </SessionProvider>
-                <ReactQueryDevtools initialIsOpen={false} />
-            </trpc.Provider>
-        </QueryClientProvider>
-    )
-}
+'use client'
+
+import { QueryClient, QueryClientProvider, defaultShouldDehydrateQuery } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { ModalProvider } from '@/context/ModalProvider'
+import { trpc } from '@/app/_trpc/client'
+import { httpBatchLink, loggerLink } from '@trpc/client'
+import SuperJSON from 'superjson'
+import { useState } from 'react'
+import { getCsrfToken, SessionProvider, refreshTokenLink } from 'nextjs-cms/auth/react'
+import { Session } from 'nextjs-cms/auth'
+
+function MakeTrpcClient() {
+    const [trpcClient] = useState(() =>
+        trpc.createClient({
+            links: [
+                /**
+                 * The refresh token link will automatically refresh the access token if it's expired.
+                 * It fetches the new access token using the refresh token by calling the `/api/auth/refresh` endpoint.
+                 */
+                refreshTokenLink(),
+                /**
+                 * The logger link will log all the operations that are being sent to the server.
+                 * @see https://trpc.io/docs/client/links/loggerLink
+                 */
+                loggerLink({
+                    enabled: (op) =>
+                        process.env.NODE_ENV === 'development' ||
+                        (op.direction === 'down' && op.result instanceof Error),
+                }),
+
+                /**
+                 * The HTTP batch link is used to send multiple operations in a single HTTP request,
+                 * but doesn't wait for all the responses of the batch to be ready,
+                 * and streams the responses as soon as any data is available.
+                 * @see https://trpc.io/docs/client/links/httpBatchStreamLink
+                 *
+                 * TODO: The stream link is somehow causing empty responses before the actual response!
+                 */
+                /*unstable_httpBatchStreamLink({
+                    transformer: superjson,
+                    url: '/api/trpc',
+                    // You can pass any HTTP headers you wish here
+                    async headers() {
+                        const headers = new Headers()
+                        headers.set('x-trpc-source', 'nextjs-react')
+                        headers.set('Authorization', `Bearer ${authStore.state.accessToken}`)
+                        return headers
+                    },
+                }),*/
+
+                /**
+                 * The HTTP batch link is used to send multiple operations in a single HTTP request.
+                 * @see https://trpc.io/docs/client/links/httpBatchLink
+                 */
+                httpBatchLink({
+                    transformer: SuperJSON,
+                    url: '/api/trpc',
+                    // You can pass any HTTP headers you wish here
+                    async headers(op) {
+                        const headers = new Headers()
+                        /**
+                         * Check if there are any mutations in the operations list
+                         */
+                        if (op.opList.some((o) => o.type === 'mutation')) {
+                            /**
+                             * Get the CSRF token, and set it in the headers
+                             */
+                            const csrfToken = await getCsrfToken()
+                            headers.set('x-csrf-token', csrfToken)
+                        }
+
+                        headers.set('x-trpc-source', 'nextjs-react')
+
+                        return headers
+                    },
+                }),
+            ],
+        }),
+    )
+
+    return trpcClient
+}
+
+function createQueryClient() {
+    return new QueryClient({
+        defaultOptions: {
+            queries: {
+                // With SSR, we usually want to set some default staleTime
+                // above 0 to avoid refetching immediately on the client
+                /**
+                 * It's better to leave the staleTime to 0 to always fetch the latest data in a cms
+                 */
+                // staleTime: 3 * 1000,
+                /**
+                 * We want to refetch on window focus in development only
+                 */
+                refetchOnWindowFocus: process.env.NODE_ENV === 'development' ? true : false,
+                retry: 1, // default: 3
+            },
+            dehydrate: {
+                serializeData: SuperJSON.serialize,
+                shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
+            },
+            hydrate: {
+                deserializeData: SuperJSON.deserialize,
+            },
+        },
+    })
+}
+
+let browserQueryClient: QueryClient | undefined = undefined
+
+function getQueryClient() {
+    if (typeof window === 'undefined') {
+        // Server: always make a new query client
+        return createQueryClient()
+    } else {
+        // Browser: make a new query client if we don't already have one
+        // This is very important so we don't re-make a new client if React
+        // suspends during the initial render. This may not be needed if we
+        // have a suspense boundary BELOW the creation of the query client
+        if (!browserQueryClient) browserQueryClient = createQueryClient()
+        return browserQueryClient
+    }
+}
+
+export default function Providers({ children, session }: { children: React.ReactNode; session: Session | undefined }) {
+    // NOTE: Avoid useState when initializing the query client if you don't
+    //       have a suspense boundary between this and the code that may
+    //       suspend because React will throw away the client on the initial
+    //       render if it suspends and there is no boundary
+    const queryClient = getQueryClient()
+    // const trpcClient = getTrpcClient()
+    const trpcClient = MakeTrpcClient()
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            <trpc.Provider client={trpcClient} queryClient={queryClient}>
+                <SessionProvider
+                    session={session}
+                    refetchOnWindowFocus={false}
+                    refetchInterval={0}
+                    refetchWhenOffline={false}
+                >
+                    <ModalProvider>{children}</ModalProvider>
+                </SessionProvider>
+                <ReactQueryDevtools initialIsOpen={false} />
+            </trpc.Provider>
+        </QueryClientProvider>
+    )
+}

package/templates/default/cms.config.ts

@@ -1,57 +1,58 @@
-import type { CMSConfig } from 'nextjs-cms/core/config'
-import { resolve } from 'path'
-
-export const config: CMSConfig = {
-        title: 'NEXTJS CMS',
-        defaultTheme: 'dark',
-    },
-    debug: true,
-    sections: {
-        path: resolve(process.cwd(), 'sections'),
-        strict: false,
-        category: {
-            allowRecursiveDelete: true,
-        },
-    },
-    media: {
-        upload: {
-            path:
-                process.env.NODE_ENV === 'development'
-                    ? 'D:/Work/WebstormProjects/turbo-expo-next/apps/web/public/content/'
-                    : '/home2/syriasell/public_html/assets/content',
-            preserveExtension: true,
-        },
-        images: {
-            image: {
-                size: {
-                    width: 1200,
-                    height: 628,
-                    fit: 'contain',
-                    strict: false,
-                },
-                quality: 100,
-            },
-            thumbnail: {
-                size: {
-                    width: 400,
-                    height: 209,
-                    fit: 'contain',
-                },
-                quality: 100,
-            },
-            watermark: false,
-        },
-    },
-    schemaGeneration: {
-        drizzle: {
-            enabled: true,
-            outDir: './dynamic-schemas',
-            fileName: 'schema.ts',
-            naming: {
-                tables: 'pascalCase',
-                columns: 'camelCase',
-            },
-        },
-    },
-    },
-}
+import { defineConfig, type CMSConfig } from 'nextjs-cms/core/config'
+import process from 'process'
+import { resolve } from 'path'
+
+export const config: CMSConfig = defineConfig({
+    ui: {
+        title: 'NEXTJS CMS',
+        defaultTheme: 'dark',
+    },
+    debug: true,
+    sections: {
+        path: resolve(process.cwd(), 'sections'),
+        strict: false,
+        category: {
+            allowRecursiveDelete: true,
+        },
+    },
+    media: {
+        upload: {
+            path:
+                process.env.NODE_ENV === 'development'
+                    ? 'D:/Work/WebstormProjects/turbo-expo-next/apps/web/public/content/'
+                    : '/home2/syriasell/public_html/assets/content',
+            preserveExtension: true,
+        },
+        images: {
+            image: {
+                size: {
+                    width: 1200,
+                    height: 628,
+                    fit: 'contain',
+                    strict: false,
+                },
+                quality: 100,
+            },
+            thumbnail: {
+                size: {
+                    width: 400,
+                    height: 209,
+                    fit: 'contain',
+                },
+                quality: 100,
+            },
+            watermark: false,
+        },
+    },
+    schemaGeneration: {
+        drizzle: {
+            enabled: true,
+            outDir: './dynamic-schemas',
+            fileName: 'schema.ts',
+            naming: {
+                tables: 'pascalCase',
+                columns: 'camelCase',
+            },
+        },
+    },
+})