CODEWITHSUNDEEP
reactjstypescriptapollo-client
Magofoco
Magofoco

Reputation: 5466

Skip query if NOT optional variable is undefined

I have to run a query that has as mandatory variable which is the result of another query. Since such result can be number | undefined, typescript complains saying that my variable can only be a number but not undefined

const { data: firstQueryData } = useQuery(GET_MY_FIRST_QUERY_DATA, {
    variables: {
      firstVariable: 100
    }
  })

const myVariable = myQueryData?.getMyQueryData <-- This is "number" | "undefined"

const { data: secondQueryData } = useQuery(GET_MY_SECOND_QUERY_DATA, {
  variables: {
    secondVariable: myVariable <-- This is "number" | "undefined" while it should only be "number"
  }
})

I tried to use skip but TS still complains:

const { data: mySecondQuery } = useQuery(GET_MY_SECOND_QUERY_DATA, {
  variables: {
    secondVariable: myVariable
  },
  skip: !myVariable
})

Upvotes: 3

Views: 1434

Answers (1)

untempered
untempered

Reputation: 101

I had the same issue and solved it by checking the truthiness of the variable first, eg:

const { data: mySecondQuery } = useQuery(GET_MY_SECOND_QUERY_DATA,
  myVariable
    ? {
        variables: {
          secondVariable: myVariable,
        },
      }
    : { skip: true }
);

Hope that helps!

Upvotes: 10

Related Questions