How to use the result of 1 query to fetch another?

[MarkLyck]

I'm considering switching from using react-query with code-gen to gqty :)

However I have quite a lot of waterfall queries I need to make. (I don't have control over the backend to do relationships in graphQL). So I have to do it on the frontend for this project.

In react-query there is a simple enabled: Boolean paramter in their useQuery functions so I can just do this:

const { data: idFromDatabase } = useQuery({ ... })
const { data: actualDataINeed } = useQuery({ ..., variables: { id: idFromDatabase }, enabled: !!idFromDatabase })

In this case, the first query will run when the component loads, but the second query will NOT run because idFromDatabase. is false until the first query is resolved.

When the first query is resolved, idFromDatabase will be truthy, and it will fetch the data that requires an id from another source first.

I know in gqty, I could achieve this with a useQuery, a useLazyQuery and adding a useEffect that listens for the result of the first query and the run the useLazyQuery when the result is there. But that seems needlessly complex? (at least coming from react-query where you just disable the query until the variable exists)

Is there nothing like this in gqty?

[vicary]

useQuery has no enable or skip options, and in fact you don't need to.

See my comment below.

[vicary]

@MarkLyck visiting this again after intensive deep dives gives me new thoughts on your use case, consider the following example:

export function YourComponent() {
  const query = useQuery();
  const id = query.idFromDatabase({ ... });

  if (!id) return <>Loading...</>;

  return (
    <>{query.actualDataNeeded({ id }).someField}</>
  );
}

Waterfalling would just happen as it renders, you don't need to do anything else.