disable calculate variables from reactive function if request is disabled

[ariran5]

Is your feature request related to a problem? Please describe. I use data from previous request and if i use reactive function, then i have error because my result is empty

() => ({
  myVariable: data.value.gqlResponse.id // error, data.value === undefined
})

i can use (?.) operator, but then my TS interface show me message "variables type error"

Its a good experience for the safety of variables

useQuery(
  querystring,
  () => ({ myVariable: data.value.fromResponse.id })
  () => ({ enabled: data.value }) // has response
)

Describe the solution you'd like Calculate reactive function only if enabled option is true

Describe alternatives you've considered

Additional context

[yusufkandemir]

I am having the same problem. To work around the problem, I am using the optional chaining (?.) operator to avoid runtime errors and using @ts-expect to suppress TS errors.

const { result } = useGetCommitsByBranchQuery(
  // @ts-expect-error https://github.com/vuejs/apollo/issues/1243
  () => ({
    branchId: activeBranch.value?.id,
  }),
  () => ({
    enabled: activeBranch.value !== undefined,
  }),
);

[thomasaull]

Yeah I just ran into the same problem, is there any other solution from using // @ts-expect-error?

[ThomasReuss]

The above solution doesn't work for me - even if we ignore TypeScript. It still makes unnecessary queries to the backend because enabled=false is too slow to avoid an unnecessary useQuery result evaluation with invalid query variables.

In other words: Assuming that myobject.value?.id can be undefined (e.g. if a user selects no object from a list, myobject is null) but the GQL query does not accept null or undefined IDs by GQL schema, how can we do something like:

if object.value?.id is a valid string ID:
  update the GQL result via useQuery
else:
  set the result to null

The above solutions seems not to work and I can only make it work in a very ugly way with load, useLazyQueryand nextTick.

[ThomasReuss]

This has now been partially resolved with a recent Release, probably v4.0.0-beta.1. For some cases, this still does not work:

useQuery(
  querystring,
  () => ({ myVariable: data.value.id })
  () => ({ enabled: !!data.value.id })
)

and will still execute the query when data.value.id is null.

[ThomasReuss]

This seems to work now on the initial execution of the query (whereas before v4.0.0-beta.1 it did not, but as soon as data.value.id is set from null to a variable like 5, the query still gets executed with data.value.id = null, and then again with data.value.id = 5.

[Akryum]

@yusufkandemir in your code, if you use strict mode (and you should), TypeScript should compain if you don't put the optional chaining operator in the variables function, since activeBranch.value can be undefined.

[yusufkandemir]

@Akryum I am already using strict mode, thanks. Semantically I prefer activeBranch.value!.id since I know it is supposed to be defined there. But, it was failing due to this bug, which just got addressed, thanks for fixing this 👏