feat [server]: nuxt rc 5

front/composables/api.ts

@@ -1,4 +1,3 @@
-import { NuxtApp } from "nuxt3/dist/app/nuxt"
 import { useLoadingStore } from "~/stores/loadingStore"
 
 type MyHeaders = { [key: string]: string }
@@ -19,27 +18,27 @@ const makeLoadingKey = (path: string) => {
   return words.join("")
 }
 
-const getCsrfCookie = (ctx: NuxtApp) => {
-  let cookie = ""
-  if (ctx?.ssrContext?.req.headers.cookie) {
-    cookie = ctx?.ssrContext.req.headers.cookie
-  } else if (process.client) {
+const getCsrfCookie = () => {
+  let cookie: string
+  if (process.server) {
+    cookie = useRequestHeaders(["cookie"])["cookie"]
+  } else {
     cookie = document.cookie
   }
   if (!cookie) {
     return null
   }
-  const csfrRow = cookie.split("; ").find((row) => row.startsWith("csrftoken="))
-  if (!csfrRow) {
+  const csrfRow = cookie.split("; ").find((row) => row.startsWith("csrftoken="))
+  if (!csrfRow) {
     return null
   }
-  return csfrRow.split("=")[1]
+  return csrfRow.split("=")[1]
 }
 
-const getHeaders = (ctx: NuxtApp, includeCsrf = false): MyHeaders => {
+const getHeaders = (includeCsrf = false): MyHeaders => {
   const headers: MyHeaders = useRequestHeaders(["cookie"])
   if (includeCsrf) {
-    const csfrToken = getCsrfCookie(ctx)
+    const csfrToken = getCsrfCookie()
     if (csfrToken) {
       headers["X-CSRFTOKEN"] = csfrToken
     }
@@ -72,21 +71,24 @@ export async function apiRequest<Type>(
 
   const key = makeLoadingKey(path)
   loadingStore.markLoading(key)
-  const { data, error } = await useAsyncData<Type>(key, (ctx) =>
-    $fetch(baseUrl + path, {
-      method: method,
-      body: payload,
-      credentials: "include",
-      headers: getHeaders(ctx, true),
-      params: params,
-    })
+  const response = await useAsyncData<Type>(
+    key,
+    () =>
+      $fetch(baseUrl + path, {
+        method: method,
+        body: payload,
+        credentials: "include",
+        headers: getHeaders(method != "GET"),
+        params: params,
+      }),
+    { initialCache: false }
   )
-  if (error.value) {
+  if (response.error.value) {
     loadingStore.markError(key)
   } else {
     loadingStore.markDone(key)
   }
-  return { data, error }
+  return response
 }
 
 export async function apiGet<Type>(path: string, params = {}) {

front/nuxt.config.ts

@@ -1,4 +1,4 @@
-import { defineNuxtConfig } from "nuxt3"
+import { defineNuxtConfig } from "nuxt"
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({

front/package.json

@@ -15,7 +15,7 @@
     "typescript": "^4.6.2"
   },
   "devDependencies": {
-    "@pinia/nuxt": "^0.1.8",
+    "@pinia/nuxt": "^0.3.0",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "@vue/eslint-config-standard": "^6.1.0",
@@ -25,8 +25,8 @@
     "eslint-plugin-nuxt": "^3.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.5.0",
-    "nuxt3": "^3.0.0-27447229.20f3171",
-    "pinia": "^2.0.13",
+    "nuxt": "^3.0.0-rc.5",
+    "pinia": "^2.0.16",
     "sass": "^1.49.9",
     "sass-loader": "10"
   }