fix(module): put query parameters removal under an experimental flag (#…

…1757)
nuxt · Dec 15, 2022 · 4ec1621 · 4ec1621
1 parent e7d11d7
commit 4ec1621
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 18 deletions.
diff --git a/src/module.ts b/src/module.ts
@@ -215,6 +215,7 @@ export interface ModuleOptions {
   },
   experimental: {
     clientDB: boolean
+    stripQueryParameters: boolean
   }
 }
 
@@ -274,13 +275,13 @@ export default defineNuxtModule<ModuleOptions>({
     },
     documentDriven: false,
     experimental: {
-      clientDB: false
+      clientDB: false,
+      stripQueryParameters: false
     }
   },
   async setup (options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
     const resolveRuntimeModule = (path: string) => resolveModule(path, { paths: resolve('./runtime') })
-
     // Ensure default locale alway is the first item of locales
     options.locales = Array.from(new Set([options.defaultLocale, ...options.locales].filter(Boolean))) as string[]
 
@@ -581,8 +582,9 @@ export default defineNuxtModule<ModuleOptions>({
       locales: options.locales,
       defaultLocale: contentContext.defaultLocale,
       integrity: buildIntegrity,
-      clientDB: {
-        isSPA: options.experimental.clientDB && nuxt.options.ssr === false
+      experimental: {
+        stripQueryParameters: options.experimental.stripQueryParameters,
+        clientDB: options.experimental.clientDB && nuxt.options.ssr === false
       },
       api: {
         baseURL: options.api.baseURL
@@ -687,12 +689,9 @@ export default defineNuxtModule<ModuleOptions>({
 })
 
 interface ModulePublicRuntimeConfig {
-  /**
-   * @experimental
-   */
-  clientDB: {
-    isSPA: boolean
-    integrity: number
+  experimental: {
+    stripQueryParameters: boolean
+    clientDB: boolean
   }
 
   defaultLocale: ModuleOptions['defaultLocale']

diff --git a/src/runtime/composables/navigation.ts b/src/runtime/composables/navigation.ts
@@ -2,6 +2,7 @@ import { hash } from 'ohash'
 import { useRuntimeConfig } from '#app'
 import type { NavItem, QueryBuilder, QueryBuilderParams } from '../types'
 import { encodeQueryParams } from '../utils/query'
+import { jsonStringify } from '../utils/json'
 import { addPrerenderPath, shouldUseClientDB, withContentBase } from './utils'
 
 export const fetchContentNavigation = async (queryBuilder?: QueryBuilder | QueryBuilderParams): Promise<Array<NavItem>> => {
@@ -21,7 +22,9 @@ export const fetchContentNavigation = async (queryBuilder?: QueryBuilder | Query
     }
   }
 
-  const apiPath = withContentBase(`/navigation/${process.dev ? '_' : `${hash(params)}.${content.integrity}`}/${encodeQueryParams(params)}.json`)
+  const apiPath = content.experimental.stripQueryParameters
+    ? withContentBase(`/navigation/${process.dev ? '_' : `${hash(params)}.${content.integrity}`}/${encodeQueryParams(params)}.json`)
+    : withContentBase(process.dev ? `/navigation/${hash(params)}` : `/navigation/${hash(params)}.${content.integrity}.json`)
 
   // Add `prefetch` to `<head>` in production
   if (!process.dev && process.server) {
@@ -33,7 +36,16 @@ export const fetchContentNavigation = async (queryBuilder?: QueryBuilder | Query
     return generateNavigation(params)
   }
 
-  const data = await $fetch<NavItem[]>(apiPath, { method: 'GET', responseType: 'json' })
+  const data = await $fetch<NavItem[]>(apiPath as any, {
+    method: 'GET',
+    responseType: 'json',
+    params: content.experimental.stripQueryParameters
+      ? undefined
+      : {
+          _params: jsonStringify(params),
+          previewToken: useCookie('previewToken').value
+        }
+  })
 
   // On SSG, all url are redirected to `404.html` when not found, so we need to check the content type
   // to know if the response is a valid JSON or not

diff --git a/src/runtime/composables/query.ts b/src/runtime/composables/query.ts
@@ -4,6 +4,7 @@ import { useRuntimeConfig } from '#app'
 import { createQuery } from '../query/query'
 import type { ParsedContent, QueryBuilder, QueryBuilderParams } from '../types'
 import { encodeQueryParams } from '../utils/query'
+import { jsonStringify } from '../utils/json'
 import { addPrerenderPath, shouldUseClientDB, withContentBase } from './utils'
 
 /**
@@ -37,7 +38,9 @@ export const createQueryFetch = <T = ParsedContent>(path?: string) => async (que
 
   const params = query.params()
 
-  const apiPath = withContentBase(`/query/${process.dev ? '_' : `${hash(params)}.${content.integrity}`}/${encodeQueryParams(params)}.json`)
+  const apiPath = content.experimental.stripQueryParameters
+    ? withContentBase(`/query/${process.dev ? '_' : `${hash(params)}.${content.integrity}`}/${encodeQueryParams(params)}.json`)
+    : withContentBase(process.dev ? '/query' : `/query/${hash(params)}.${content.integrity}.json`)
 
   // Prefetch the query
   if (!process.dev && process.server) {
@@ -49,7 +52,16 @@ export const createQueryFetch = <T = ParsedContent>(path?: string) => async (que
     return db.fetch(query as QueryBuilder<ParsedContent>)
   }
 
-  const data = await $fetch(apiPath as any, { method: 'GET', responseType: 'json' })
+  const data = await $fetch(apiPath as any, {
+    method: 'GET',
+    responseType: 'json',
+    params: content.experimental.stripQueryParameters
+      ? undefined
+      : {
+          _params: jsonStringify(params),
+          previewToken: useCookie('previewToken').value
+        }
+  })
 
   // On SSG, all url are redirected to `404.html` when not found, so we need to check the content type
   // to know if the response is a valid JSON or not

diff --git a/src/runtime/composables/utils.ts b/src/runtime/composables/utils.ts
@@ -43,9 +43,9 @@ export const addPrerenderPath = (path: string) => {
 }
 
 export const shouldUseClientDB = () => {
-  const { clientDB } = useRuntimeConfig().content
+  const { experimental } = useRuntimeConfig().content
   if (!process.client) { return false }
-  if (clientDB?.isSPA) { return true }
+  if (experimental.clientDB) { return true }
 
   const query = useRoute().query
   // Disable clientDB when `?preview` is set in query, and it has falsy value

diff --git a/src/runtime/plugins/documentDriven.ts b/src/runtime/plugins/documentDriven.ts
@@ -10,7 +10,7 @@ import { defineNuxtPlugin, queryContent, useContentHelpers, useContentState, fet
 import layouts from '#build/layouts'
 
 export default defineNuxtPlugin((nuxt: NuxtApp) => {
-  const { documentDriven: moduleOptions, clientDB } = useRuntimeConfig()?.public?.content
+  const { documentDriven: moduleOptions, experimental } = useRuntimeConfig()?.public?.content
 
   /**
    * Finds a layout value from a cascade of objects.
@@ -249,7 +249,7 @@ export default defineNuxtPlugin((nuxt: NuxtApp) => {
     // TODO: Remove this (https://github.com/nuxt/framework/pull/5274)
     if (to.path.includes('favicon.ico')) { return }
     // Avoid calling on hash change
-    if (process.client && !clientDB.isSPA && to.path === from.path) { return }
+    if (process.client && !experimental.clientDB && to.path === from.path) { return }
 
     const redirect = await refresh(to, false)