I'm trying to run two sequencitally graphQL requests, the first one give me data that I need into the second one parameters. And I don't know how to wait to the first.

My program is the following one:

I have the declaration of my GraphQL requests:

const [
    addConfigurableProductToCart,
    { error: errorAddingSimpleProduct, loading: isAddSimpleLoading }
] = useMutation(ADD_CONFIGURABLE_MUTATION);

const [getDataParentSku, { error, loading, data }] = useLazyQuery(
    GET_PARENT_SKU
);

And the main workflow are in this function.

const handleAddProductsToCart = useCallback(
    async csvProducts => {
        let tempSkuErrorList = [];
        for (let i = 0; i < csvProducts.length; i++) {
            const orParentSku = getDataVariable(csvProducts[i][0]);

            const variables = {
                cartId,
                quantity: parseInt(csvProducts[i][1], 10),
                sku: csvProducts[i][0],
                parentSku: orParentSku.then(res => {
                    return res.products.items[0].orParentSku;
                })
            };

            try {
                await addConfigurableProductToCart({
                    variables
                });
            } catch {
                tempSkuErrorList.push(csvProducts[i][0]);
            }
        }
    },
    [
        addConfigurableProductToCart,
        cartId,
    ]
);

getDataVariable() is the function who call the first query (useLazyQuery()). And its content is:

const getDataVariable = useCallback(
    async sku => {
        getDataParentSku({
            variables: { sku: sku }
        });

        return await data;
    },
    [getDataParentSku, data]
);

The error that I have been finding all the time is that when I need the data, is undefined.

Another option was the idea of using this library https://www.npmjs.com/package/graphql-lodash, in order to merge the query into one, but is outdated.

Thanks a lot for your help.