How to use Apollo useLazyQuery hook without a constant query (graphql-tag)?

Hi everyone, I try to use the useLazyQuery hook with dynamic tag and variables without success so far !

I have a first useQuery who fetch some objects that contain the query I need in my second call. Here my issues begin.

I tried to put a “dummy” query in my second call while waiting for my data and reset it before I use the useLazyQuery getData() callback but I can’t get it to work. I have my data in the network tab but the callback return by useLazyQuery doesn’t return my data.

const isMounted = useRef(false);

const [layers, setLayers] = useState([]);
const [switchedLayer, setSwitchedLayer] = useState('');

const layerDescriptions = [];

let SWITCHED_LAYER_QUERY;
let switchedLayerVariables;
let layerDescription;

 // handle layer activation by switch
 function handleSwitch(e) {
  setSwitchedLayer(e.target.value);
}

// function that set the query and variables for the call of the layer data
async function findSwitchedLayerQueryAndVariables(descriptions, layerName) {
  const layer = descriptions.find((l) => l.name === layerName);
  layerDescription = layer;
  SWITCHED_LAYER_QUERY = layer.query;
  switchedLayerVariables = layer.variables.filter;
}

// we declare queries for folders and layer data
const { loading, error, data: data_folders } = useQuery(FOLDERS, {
  variables: { filter: { _id: '62c2a86eeb370b9efe98bc41' } },
});

// it's here that I try to use query based on previous fetch instead of the LAYER default constant
const [getLayerData, { loading: loading_layer, error: error_layer, data: data_layer }] = useLazyQuery(LAYER, {
  variables: { filter: { areas: '60cb5cad3d3655ed4bee13f0', type: 'fire_station' } },
});

useEffect(() => {
  if (isMounted.current && switchedLayer) {
    findSwitchedLayerQueryAndVariables(layerDescriptions, switchedLayer)
    .then(getLayerData())
    .then((res) => createLayer(layerDescription, res.data.fire_stations))
    .then((res) => setLayers((current) => [...current, res]));
  } else {
    isMounted.current = true;
  }
}, [switchedLayer]);

if (loading) return 'Loading...';
if (error) return 'Error!';

// we fill layerDescriptions
function fillLayerDescriptions(data) {
  data.user.products[0].folders.map((folder) => folder.layers.map((layer) => layerDescriptions.push(layer)));
}

if (data_folders) {
  fillLayerDescriptions(data_folders);
}

I taught to use the skip option of useQuery but I don’t think that’s the best approach because I’m fetching in response to an event hence the use of useLazyQuery.

I tried several hacks and read many post without finding an answer so far. I don’t know if my issue is only related to Apollo or to the relation between react and Apollo hooks.

TLDR, What I try to do: How to handle multiple queries depending on each other.

1- fetch data with useQuery on initial render
2- fetch data with useLazyQuery based on a query contained in the previously fetch data
3- render data from step 2 using the useLazyQuery returned function

Thank you in advance for your help.