Nuxt3 edit page with useFetch / $fetch as well as a typed object for storage not loading

I am rather new to nuxt3. I am trying to build a new app api based with nuxt3. I had versions working "somehow" but non succeeded to my expectation. Things I want to have covered in theory plus code:

Have a typed "container" for storage I can use to track the current state of the form.

# types/models.ts
export type Client = {
id?: number; 
name: string;
}
# id is optional as the container can be used for new records also which does not have an ID yet.

I am importing this in my view:

<script setup lang="ts">
import { Client } from '~/types/models'
const { auth } = useSupabaseAuthClient();
const { data: { session } } = await auth.getSession()
const route = useRoute();
# I am not successfully able to assign the type to use this in the views.
const client = ref<Client>({
name: "a",
});
# Due to the result attributes is wrapped in "client" in the response, used below
interface TransformedData {
client: Client
}
const { data:result } = await useFetch(`http://localhost:3000/clients/${route.params.id}`, {
headers: {
'Authorization': `Bearer ${session?.access_token}`
},
transform: (result) => (result as TransformedData).client,
});
# I am not able to pass the result correctly to client.
client.value = await(result.value as Client);
const submitForm = async () => {
const { data:result } = await useFetch(`http://localhost:3000/clients/${route.params.id}`, {
method: "PATCH",
body: {
client: {
name: client.value.name,
}
},
headers: {
'Authorization': `Bearer ${session?.access_token}`
},
transform: (result) => (result as TransformedData).client,
});
// client.name = (result.value as Client).name;
}
</script>
<template>
<form @submit.prevent="submitForm">
<input v-model="client.name" type="text" name="name" id="name" />
<button type="submit">Save</button>
</form>
</template>

What I am basically looking for is a best practive to do this:

• Have a "store" in the view (I guess wrong wording)
• Have the GET request filling the data of the store
• Have the form and title (etc) of the page showing the store data
• Have the PATCH request to use that "store" to send it to the server and update the view.

As this is the base for all the other views, I'd rather like to have a good implemenation here which makes sense instead of "somehow unexpectedly working" as I had in between.

Things I tried

• Wrap the GET request into a const loadData and call it onMounted, but that did not yield any results, did not work.
• use useAsyncData and $fetch, same issues.
• Basically changing all the places in the code and none trying different syntax and approaches.
• Read all the internet I feel like.

It would be greatly appreciated if someone has a best practice to share or has ideas on how to solve this!

Thanks loads!

I now have a state running I am ok with. This is a summary to help everyone. It is fine for my own project as it is just one solution, if I would go for a clients project here I'd try to move common logic from many of those stores into a composable / base store. Now I will just be duplicating the same code.

This is my setup in the view:

<script setup lang="ts">
import { useClientStore } from "@/stores/client";
import { useAuthStore } from "@/stores/auth";
const { auth } = useSupabaseAuthClient();
const authStore = useAuthStore();
const store = useClientStore();
const route = useRoute();
onMounted(() => {
authStore.auth = auth;
store.fetchRecord(route.params.id);
});
</script>

This is the relevant part in the view:

<template>
<button @click="store.fetchRecord(route.params.id)">FETCH</button>
<button @click="store.updateRecord">UPDATE</button>
{{ store.name }}
</template>

And this is the store with just the fetch method to keep it short (same thing for the others)

import { useAuthStore } from "@/stores/auth";
export const useClientStore = defineStore('clients', {
state: (): Client => ({
id: null,
name: ""
}),
getters: {
record_url: (state) => `http://localhost:3000/clients/${state.id}`
},
actions: {
async fetchRecord(id: any) {
const { data: { session } } = await useAuthStore().auth.getSession();
const token = `Bearer ${session?.access_token}`;
const url = `http://localhost:3000/clients/${id}`;
try {
await useFetch(url, {
headers: {
'Authorization': token
},
onResponse({ response }) {
const client = response._data.client as Client;
useClientStore().$patch((state) => {
state.id = client.id;
state.name = client.name;
// more attribute translation here
})
},
});
} catch (error) {
console.log(error)
}
},
},
})
interface Client {
id: number | null
name: string
}
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useClientStore, import.meta.hot))
}

Apart from this I will look into these items for a cleaner solution of this concept:

• Is it the best way to share / access auth tokens
• A better way to manage URLs so I can use the store to build links to items with NuxtLink. And if it makes sense at all.
• Check once more if onMounted approach for initially loading my data and storing the token is actually good.
• Overall improvements.

So far I like Nuxt after a few days. If anyone spots any potential improvements to this solution, happy to learn! Thanks again [Json Landbridge]

> Have a "store" in the view (I guess wrong wording)

What most developers use is Pinia as "state management" for centralized data storage.

> Have the GET request filling the data of the store

Await the response of the request, and then set that response in the store, which will then update the rest of the app.

> Have the form and title (etc) of the page showing the store data

Same as above, if you bind the store correctly then it will update this as well.

> Have the PATCH request to use that "store" to send it to the server and update the view.

I'm not sure what you mean here, but I assume you would like to get the data from the store and send it to the server? This is easily done with "getters" in Pinia. This is something different from updating the view though, as in you don't need to send data to the server to update the view, everything happens in the front-end.

EDIT

Pinia example with useFetch:

// Inside the component
// This is the store you created:
const store = useStore()
// The api call
await useFetch('/api/auth/login', {
  onResponse({ response }) {
    // Update the store with the response, note that `updateData` is a function you have to create yourself
    store.updateData(response.data);
  },
})

> [comment]: From an abstract point of view the store might even encapsulate reading / updating from an API / remote store, but I didn't see that.

Sure, you can take a look here: https://blog.logrocket.com/consume-apis-vuex-pinia-axios/#consuming-apis-pinia-axios

This is where you use Axios inside an Pinia action to call the api and then set the response in that same store.

> [comment]: For the second question: can you share an example how you would transfer the data into the store?

This depends on the context and you have 2 options here, the useFetch and the Axios inside the Pinia Actions.

If the data is only used in that specific component, and nowhere else. Then you can do useFetch, but for everything else I would definitely use the Axios inside the Pinia Actions approach.