use meilisearch client directly for articles and pdockq matrix

components/content/ArticleDoi.vue

@@ -23,14 +23,10 @@ const article = ref<WikiArticle | undefined>(undefined)
 const { mobile } = useDisplay();
 const show = ref(false);
 
-onBeforeMount(async () => {
-  const { article: articleOnMounted } = await useFetchArticle(props.doi);
-  article.value = articleOnMounted.value
-})
 
 
-onMounted(async () => {
-  const { article: articleOnMounted } = await useFetchArticle(props.doi);
+onMounted(() => {
+  const { article: articleOnMounted } = useFetchArticle(props.doi);
   article.value = articleOnMounted.value
 })
 
@@ -60,8 +56,8 @@ const articleAbstract = computed(() => {
           {{ article?.subtitle ?? "no authors" }}</v-card-subtitle>
         <v-card-subtitle class="py-0">
           {{ article?.containerTitle ?? "no containerTitle" }} ({{
-            article?.year
-          }})</v-card-subtitle>
+    article?.year ?? "N/A"
+  }})</v-card-subtitle>
       </v-card-item>
       <v-card-item class="pa-0">
         <v-expand-transition>

components/content/RefArticle.vue

@@ -25,7 +25,7 @@ onMounted(async () => {
         {{ article?.year }}</v-chip> -->
     <NuxtLink v-if="article" :href="`#ref-${props.doi}`"
         :class="theme.global.current.value.dark ? 'text-grey-lighten-1' : 'text-grey-darken-2'" class="pa-0 ">{{
-            article?.author[0]?.family ?? "test" }} et al,
+        article?.author?.[0]?.family }} et al,
         {{ article?.year }}</NuxtLink>
 </template>
 <style scoped>

components/content/pdockqMatrix.vue

@@ -3,7 +3,7 @@ import * as d3 from "d3";
 import * as Plot from "@observablehq/plot";
 import PlotFigure from "@/components/PlotFigure";
 // import { useMeiliSearchRef } from 'nuxt-meilisearch'
-
+import type { SearchResponse } from 'meilisearch'
 
 export interface Props {
     system?: MaybeRef<string | null>
@@ -30,7 +30,7 @@ const margin = ref<PlotMargin>({
     marginLeft: 150
 })
 
-const data = ref()
+const data = ref<SearchResponse | undefined>(undefined)
 const client = useMeiliSearchRef()
 
 onMounted(async () => {

composables/useFetchArticle.ts

@@ -3,10 +3,9 @@ import { StorageSerializers } from "@vueuse/core"
 import type { CslJson, WikiArticle } from '@/types/articles';
 import type { SearchParams } from 'meilisearch'
 
-export async function useFetchArticle(doi: string = "") {
+export function useFetchArticle(doi: string = "") {
     const doiBaseUrl = ref(new URL("https://doi.org/"));
-    // const article = ref<WikiArticle | undefined>(undefined)
-    const article = useSessionStorage<WikiArticle>(doi, null, { serializer: StorageSerializers.object })
+    const article = useSessionStorage<WikiArticle | undefined>(doi, null, { serializer: StorageSerializers.object })
     const client = useMeiliSearchRef()
     const index = ref("article")
     const params = ref<SearchParams>({
@@ -51,28 +50,12 @@ export async function useFetchArticle(doi: string = "") {
     }
 
     if (!article.value) {
-        const { data, error } = await useAsyncData(
-            doi,
-            async () => {
-                return await client.index(toValue(index)).search<CslJson>("", toValue(params))
-            },
-            {
-                transform: function (data) {
-                    if (data !== undefined && data?.hits.length >= 1) {
-                        return zoteroArticleToArticle(data.hits[0])
-                    }
-                }
-            }
-        )
-
-        if (error.value) {
+        client.index(toValue(index)).search<CslJson>("", toValue(params)).then((response) => {
+            const sanitizedData = zoteroArticleToArticle(response.hits[0])
+            article.value = sanitizedData
+        }).catch((error) => {
             article.value = { DOI: doi }
-            // throw createError({
-            //     ...error.value,
-            //     statusMessage: `Could not fetch article ${doi}`
-            // })
-        }
-        article.value = data.value
+        })
     }
     return { article }
 }

eslint.config.mjs

+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  formatters: true,
+  unocss: true,
+  vue: true,
+})

package.json

@@ -27,7 +27,11 @@
     "@vueuse/nuxt": "^10.7.1",
     "nuxt": "^3.11.1",
     "nuxt-meilisearch": "^1.1.0",
-    "vuetify-nuxt-module": "^0.9.0"
+    "vuetify-nuxt-module": "^0.9.0",
+    "@antfu/eslint-config": "^2.11.6",
+    "eslint-plugin-format": "^0.1.0",
+    "@unocss/eslint-plugin": "^0.58.8",
+    "eslint": "9.0.0-rc.0"
   },
   "overrides": {
     "vue": "latest"
@@ -42,4 +46,4 @@
     "pinia": "^2.1.6",
     "yaml": "^2.3.3"
   }
-}
+}
\ No newline at end of file

types/articles.ts

 export interface WikiArticle {
     DOI: string
-    title: string
-    subtitle: string
-    author: Array<{ family: string; given: string }>
-    containerTitle: string
-    abstract: string
-    year: string
-    href: string
-    target: string
-    prependIcon: string
+    title?: string
+    subtitle?: string
+    author?: Array<{ family: string; given: string }>
+    containerTitle?: string
+    abstract?: string
+    year?: string
+    href?: string
+    target?: string
+    prependIcon?: string
 }
 
 export interface CslJson {