Urql: useLazyQuery hook

[jgoux]

Hello,

Apollo has the very useful useLazyQuery which allows to trigger the query independently of the component rendering.

I didn't see an equivalent with urql.

Right now I'm wiring things manually :

const SelectBoxForm: FC<{ onChange: any }> = ({ onChange }) => {
  const graphqlClient = useClient();
  const onSubmit = async ({ boxBarcode }: SelectBoxFormData) => {
    const { data } = await graphqlClient
      .query<GetBoxQuery, GetBoxQueryVariables>(GET_BOX, {
        barcode: boxBarcode
      })
      .toPromise();
    onChange(data?.boxByBarcode);
  };

  return (/* JSX */)
}

I think it would be a great addition to the lib as these lazy queries are quite common (at least in my apps? 😄)

Also we could then leverage this hook to generate more typesafe utilities with graphql-codegen!

[JoviDeCroock]

Hey @jgoux

Thanks for bringing this up!
Isn't that the same as using pause: true in our hooks? Since the second argument of return value of useQuery is executeQuery.

[jgoux]

Hi @JoviDeCroock and thanks for the very fast answer! ⚡️

I'm not sure they're the same.

In this example :

const [res, executeQuery] = useQuery({
    query: getTodos,
    pause: true
  });

Is it possible to omit the "variables" from the hook and pass it to executeQuery later?
Also executeQuery returns void, not the state's object, so I don't see how I could use it in the snippet I shared.

[kitten]

No, it's not possible to override the variables in executeQuery since in that case we'd really recommend a custom hook based on client.query() which returns a promise :)

Alternatively you can in most cases achieve complex changes with pause dependent on some state and variables being in a useState hooks, but it really depends on your use-case.

[jgoux]

@kitten Ok, good to know!

As you said, I can roll my own custom hook but I really think there is a strong use-case for this hook.

The graphql-hooks library also has this hook.

I'm running out of arguments so I let you decide if it's worth it or not. 👍

[kitten]

I think this is mainly the same as calling client.query and saving the result to a hook so I'd rather not make a distinction here :)

I'm convinced that in most cases pause: true is sufficient where queries are _eventually_ made reactive to the UI. I've seen an app that used urql where a query was made to validate some form data, but only after the form was deemed "valid" in some offline validation. That was done by deriving the variables and feeding them to useQuery from some state and setting pause to true when the form was valid.

In other cases I can completely see the need for queries that are non-UI-driven and transactional, but since in such cases the logic will be very transaction-based and possibly imperative, I think we should stick to recommending client.query() in those cases :)

[kitten]

Closed due to inactivity. The above programmatic API is still the recommended way to use "lazy queries"