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

[antoine-dupuy]

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.

[jpvajda]

Thank you for reporting this! I'd recommend posting this in our Apollo Community for guidance from other Apollo users, as other's may have input into your question. I'll leave this open for a while to see if anyone in the community has any suggestions as well.

[antoine-dupuy]

Thank you for your answer. As advised I posted it on the Apollo Community !

[jerelmiller]

Hey @antoine-dupuy 👋

I hope you were able to get the help you needed in the forum! Since some time has passed, I'm going to go ahead and close this. Thanks!

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.