Does this look right? Loading data for editing form

[mercmobily]

I am writing an app generator. I intend to use all of the best practices for everything. However, I have recently moved ro vue/tanstack and I am still working out what the best practices are -- this is especially hard with Vue, since everything has changed in the last year and a half.
Anyhow, this is a file generated by js-kit. I was hoping I could have some feedback in terms of having made huge mistakes.
I have some issues:

• Changing tabs, and re-focussing the tab, triggers a reload. This is especially bad since this is an editing screen -- imagine a user typing a long description, then popping onto a new tab to search something, go back to the editing screen, and BANG! everything is... gone!

• Cache. I am not sure the cache is being used. When I leave the editing screen (say, I save) and enter it again, it will reload. My understanding of the documentation is that it will provide data, and THEN triggers a reload, and only triggers a mutation if the data has changed. Well 1) I don't see this happening 2) If it DID happen in an editing screen, again, it would be kind of terrible (whereas in a viewing screen it would be OK)

Ideas?

<script setup>
import { useDataLoader } from '@/lib/dataLoader.js'
import { ref, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useQuery, useQueryClient, useMutation } from "@tanstack/vue-query"
import { cancelForm } from "@/lib/crudUtils.js"

const route = useRoute()
const router = useRouter()

const api = useDataLoader('projects')
let record = ref({})
const id = computed(() => { return route.params.id })

const { isLoading, isFetching, isError, data, error, refetch } = useQuery({
  queryKey: ['projects', id.value],
  queryFn: () => api.get(id.value).then(data => record.value = data),
})

// This is to make sure that data is reloaded if user navigates between sibling routes,
// where the route itself doesn't change, just params do
watch(() => id.value, () => { refetch() })

// Access QueryClient instance
const queryClient = useQueryClient()

const mutation = useMutation({
  mutationFn: (data) => api.put(id.value, data).then(data => record.value = data),
  onSuccess: (data) => {
    record.value = data
    queryClient.setQueryData(['projects', data.id ], data)
    router.push(`/projects`)  },
})

async function save (e) {
  const data = Object.fromEntries(new FormData(e.target))
  await mutation.mutate(data)
}

</script>

<template>
    <layout-div>
        <h2 class="text-center mt-5 mb-3">Edit Projects</h2>
        <div class="card">
            <div class="card-header">
                <!--
                <router-link 
                    class="btn btn-outline-info float-right"
                    to="/projects">View All Projects
                </router-link>
                -->
            </div>
            <div class="card-body">
                <form @submit.prevent="save">
                    <div class="form-group">
                        <label :htmlFor="name">name</label>
                        <input 
                            :value="record.name"
                            type="text"
                            class="form-control"
                            id="name"
                            name="name"/>
                    </div>


                    <div class="form-group">
                        <label :htmlFor="description">description</label>
                        <input 
                            :value="record.description"
                            type="text"
                            class="form-control"
                            id="description"
                            name="description"/>
                    </div>

                    <button 
                        type="submit"
                        class="btn btn-outline-primary mt-3">
                        Save
                    </button>
                    <button @click="cancelForm(router, `/projects`)"
                        type="button"
                        class="btn btn-outline-primary mt-3">
                        Cancel
                    </button>

                </form>
            </div>
        </div>
    </layout-div>
</template>


<style>
</style>

[TkDodo]

Changing tabs, and re-focussing the tab, triggers a reload. This is especially bad since this is an editing screen -- imagine a user typing a long description, then popping onto a new tab to search something, go back to the editing screen, and BANG! everything is... gone!

have a read here how to avoid this: https://tkdodo.eu/blog/react-query-and-forms

[mercmobily]

Oh crap I didn't realise you, the maintainer of Tanstack query, had answered -- thank you for taking the time to respond.

I must be doing something wrong, as stateTime: Infinity is doing weird things: when I go back to the editing page (after leaving it), the record is not being loaded at all (!)

[mercmobily]

Holy crap/2 -- I think my code is wrong!
Setting stale at infinity made me realise that this code:

const { isLoading, isFetching, isError, data, error, refetch } = useQuery({
  queryKey: ['projects', id.value],
  queryFn: () => api.get(id.value).then(data => record.value = data),
})

has that crucial record.value = data (which updates my form), but it ONLY happens when a query is ACTUALLY run (that is, the data was not in the cache).
if the data is in the cache, then useQuery() above will NOT make the call (obviously), data will be available straight in data, and I should assign it!

const { isLoading, isFetching, isError, data, error, refetch } = useQuery({
  queryKey: ['projects', id.value],
  queryFn: () => api.get(id.value).then(data => record.value = data),
  staleTime: Infinity
})
if (data.value) record.value = data.value

Am I correct?
IF I AM, Is this something that should be added to the official documentation? I would be happy to help if so.

[mercmobily]

@TkDodo You still around? 😄

[TkDodo]

I don't understand vue enough to say if that's correct, but yes, the queryFn will not run if data is read from the cache. That's the point of the cache ;)

[mercmobily]

No worries, Thank you for taking the time to answer -- VERY MUCH appreciated!

[Mini-ghost]

You can include a computed property in the queryKey and vue-query will automatically refetch when the id is updated.

The following code is what I consider to be the best practice:

const queryClient = useQueryClient();

const id = computed(() => route.params.id);

let record = ref({});

const { data } = useQuery({
  // The `queryKey` allows you to store reactive data, and it will automatically refetch the query
  // when the `id` is updated.
  queryKey: ['projects', id],
  queryFn: () => api.get(id.value),
});

const mutation = useMutation({
  mutationFn: data => api.put(id.value, data),
  onSuccess: data => {
    queryClient.setQueryData(['projects', data.id], data);
  },
});

watch(
  data,
  values => {
    if (!values) return;

    // update form
    record.value = values;
  },
  {
    immediate: true,
  }
);