How to properly type guard to avoid "possibly undefined"

[Vincent-HD]

Hi
I'm having lots of "Object is possibly 'undefined'" because the data is maybe not already retrieve, but how can I properly type guard to avoid this problem ?
In this discussion: TanStack/query#748
This can be solved by checking the state of the query in React, but it not seems to work with Vue Query, what am I missing ?

But in the template each time I use the data it still can be undefined
For now I put a v-else-if="reservation" reservation is the query's result so Vue is sure that the data is here
I have the same problem in setup part 😅

Like here, I want to use a mutation, so I need to pass the reservation value, but it can be undefined :

If I put the useMutationUpdateReservation in this condition

if (reservation.value) {
     const {isLoading: isUpdating, isSuccess: isUpdated, mutate, reset} = useMutationUpdateReservation(reservation.value)
}

then reservation.value is defined, but mutate isn't in updateReservation function

The only way I found for now is to force the type of reservation.value

Here with reservation.value as Reservation or reservation.value! no more possibly undefined
Which in a certain way makes sense because updateReservation() is only called on a Save button in the template which is only displayed when reservation is defined. But it still seems to be a bad way to fix it 🤔

[Vincent-HD]

I added more precision to the question 👍

[DamianOsipiuk]

So the typing is good, since on first render you might actually get undefined. This might also be true for the click handler, cause request to server might get stuck, or fail.
Therefore you need to guard against that kind of value. If it's undefined , you might want to provide some fallback value, or even some error page.
When you are sure that the value would be there (you should not, cause you user might have a crappy network connection from his mobile phone) you might overwrite it with typescript assertion. But i think you should be more defensive and provide a fallback when the value would not be there as you are anticipating.
As for your custom hook, you might want to provide there a full ref, which will watch if there is an actual value or not.

In summary, types are hinting you that you might encounter an undefined value here, which might be caused by poor network connection, which is correct. You should definitely guard against that scenario.
This also showcases the difference between global state libraries like vuex or pinia and vue-query. You cannot be entirely sure that network request you are making will succeed. Cause you might be on a plane without network connection. 😉

[ebisbe]

I have a similar case as OP. In mine theres a button to delete a coupon that in the template hides under a v-else-if="data"

Then I have this in the setup script

const route = useRoute()
  const couponId = route.params.id as string
  const { isLoading, data } = useCouponQuery(couponId, {
    enabled: computed(() => !!couponId)
  })

  const router = useRouter()
  const { mutate } = useDeleteCouponMutation()
  const deleteCoupon = () => {
    if (data instanceof Coupon)
      mutate(data, {
        onSuccess: () => {
          router.push({ name: 'CouponsList' })
        }
      })
  }

Until I added the if(data instanceof it didn't stop saying that data might be undefined. I'm just a week or two new to typescript so maybe there's something I have to avoid from now on ( that it's still not clear to me ).

[Vincent-HD]

So if you wondering what the actual code looks like :
Well I solved it by defining a default value for the view

const reservation = ref<Reservation>({
    id: 0,
    statut: {
        label: 'Non traitée',
        value: 'non_traitee'
    },
    date_du_rendez_vous_souhaitee: '',
    validation_du_rendez_vous: {
    }
})

Then when the actual data is retrieved from the query I replace the default value by the actual data. So reservation is always defined, and I throw an error in updateReservation method if the id is equal to 0

const { isLoading: isReservationLoading, isIdle: isReservationIdle, isError: isReservationError, data: reservationAPI, error, isFetching, refetch: reservationRefetch } = useQueryGetReservationById(reservationId, {
    cacheTime: 0,
    refetchOnWindowFocus: false,
    onSuccess: (data) => reservation.value = data,
    onError(error) {
        if (error && error instanceof ApiError) {
            router.push({name: 'NotFound'}).then(() => Swal.fire('Une erreur est survenue', error.message, 'error'))
        } else {
            router.push({name: 'NotFound'}).then(() => Swal.fire('Une erreur est survenue', undefined, 'error'))
        }
    }
})

Here is the where I check if reservation is valid

export async function updateReservation(reser: Reservation) {
    if (reser && reser.id !== 0) {
        let req = await instanceAxios.patch<number>(`${reser.id}`, reser)
        handleResponseError(req.data)
        return req.data
    } else {
        throw new Error('La réservation reçu est vide')
    }
}

I'm unsure if the way that I've done it is a good way to do it, so feel free to tell me if you see something wrong/bad