fix SSR warning and restore poc/index.vue

models/ApiResource.ts

@@ -5,6 +5,15 @@ import {Model} from "pinia-orm";
  */
 export class ApiResource extends Model {
 
+    /**
+     * Fix the 'Cannot stringify arbitrary non-POJOs' warning, meaning server can not parse the store
+     *
+     * @see https://github.com/vuex-orm/vuex-orm/issues/255#issuecomment-876378684
+     */
+    toJSON () {
+        return { ...this }
+    }
+
     /**
      * Is it a newly created entity?
      *

pages/poc/index.vue

@@ -1,20 +1,25 @@
 <template>
   <main>
     <div>
-      <ul>
-        <li v-for="file in files">
-          <nuxt-link :to="'/poc/' + file.id" class="mr-3">{{ file.name }}</nuxt-link>
-        </li>
-      </ul>
-      <div class="ma-3">{{ totalItems }} results</div>
-      <div class="ma-3">
-        <button @click="goToPreviousPage" class="mr-3">Previous page ({{ pagination.previous }})</button>
-        <span class="mx-3">Page : {{ page }}</span>
-        <button @click="goToNextPage">Next page ({{ pagination.next }})</button>
-        <span class="mx-2"> (Last page : {{ pagination.last }})</span>
+      <div v-if="pending">
+        Pending...
       </div>
-      <div class="ma-3">
-        <nuxt-link to="/poc/new">Create</nuxt-link>
+      <div v-else>
+        <ul>
+          <li v-for="file in files">
+            <nuxt-link :to="'/poc/' + file.id" class="mr-3">{{ file.name }}</nuxt-link>
+          </li>
+        </ul>
+        <div class="ma-3">{{ totalItems }} results</div>
+        <div class="ma-3">
+          <button @click="goToPreviousPage" class="mr-3">Previous page ({{ pagination.previous }})</button>
+          <span class="mx-3">Page : {{ page }}</span>
+          <button @click="goToNextPage">Next page ({{ pagination.next }})</button>
+          <span class="mx-2"> (Last page : {{ pagination.last }})</span>
+        </div>
+        <div class="ma-3">
+          <nuxt-link to="/poc/new">Create</nuxt-link>
+        </div>
       </div>
     </div>
   </main>
@@ -22,7 +27,7 @@
 
 <script setup lang="ts">
   import {useEntityManager} from "~/composables/data/useEntityManager";
-  import {Ref} from "@vue/reactivity";
+  import {computed, ComputedRef, Ref} from "@vue/reactivity";
   import ApiResource from "~/models/ApiResource";
   import {File} from "~/models/Core/File";
   import {Collection, Pagination} from "~/types/data";
@@ -31,40 +36,33 @@
   const em = useEntityManager()
 
 
-
-  let files: Array<ApiResource> = reactive([])
   const page: Ref<number> = ref(1)
 
-  const totalItems: Ref<number> = ref(0)
-  let pagination: Pagination = reactive({first: 1, last: 1, next: undefined, previous: undefined})
-
-  const fetchAll = async function() {
-    const { data, pending, refresh } =  useLazyAsyncData(
-        'files',
-        () => em.fetchAll(File, page.value)
-    )
+  const totalItems: ComputedRef<number | undefined> = computed(() => collection.value?.totalItems)
 
-    //@ts-ignore
-    collection = reactive(data.value) as Collection
+  const pagination: ComputedRef<Pagination | undefined> = computed(() => {
+    return collection.value?.pagination
+  })
 
-    // On met à jour les arrays sans les remplacer avec useReactiveUpdate pour ne pas perdre la réactivité
-    // useReactiveUpdate(files, collection.items)
-    // useReactiveUpdate(pagination, collection.pagination)
+  let files: ComputedRef<Array<ApiResource> | undefined> = computed(() => {
+    return collection.value?.items
+  })
 
-
-  }
-  await fetchAll()
+  let { data: collection, pending, refresh } = useLazyAsyncData(
+      'files',
+      () => em.fetchAll(File, page.value)
+  )
 
   const goToPreviousPage = async function () {
     if (page.value > 1) {
       page.value--
-      await fetchAll()
+      await refresh()
     }
   }
 
   const goToNextPage = async function () {
     page.value++
-    await fetchAll()
+    await refresh()
   }
 
 </script>