Run sequental graphql queries using Apollo Client - reactjs

Question

I am trying to load data using below queries in React.
export const GET_POSTS = gql`
query GetLaunches($limit: Int) {
launches(limit: $limit) {
name
id
date_utc
}
}
`;
I am using above query like below inside React component.
const {loading, error, data} = useQuery(GET_POSTS, {
variables: { limit },
skip: !limit
});
Above return data like below.
data = {
items: [
{
date_utc: "2014-01-06T18:06:00.000Z"
id: ['9D1B7E0']
name: "Thaicom 6"
},
{
date_utc: "2014-01-06T18:06:00.000Z"
id: ['1S1B5D0']
name: "Thai 0"
},
{
date_utc: "2014-01-06T18:06:00.000Z"
id: ['7F1B7E3']
name: "Sun 6"
},
{
date_utc: "2014-01-06T18:06:00.000Z"
id: ['4A1B5K7']
name: "Moon 0"
}
]
}
Now what I want to make another query where I will pass above id as a variable to another query and load description of each individual above list of items.
I tried below. Below is queries.ts file.
import { gql } from 'apollo-boost';
export const GET_POSTS = gql`
query GetLaunches($limit: Int) {
launches(limit: $limit) {
name
id
date_utc
}
}
`;
export const GET_DESCRIPTION = gql`
query GetDescription($id: ID!) {
mission(id: $id) {
description
}
}
`;
Here is Home.tsx file.
import React, { useEffect, useState } from 'react';
import { useQuery } from '#apollo/react-hooks';
import { HomeContainer } from '../Container/';
import { GET_POSTS, GET_DESCRIPTION } from '../Queries/';
export const Home: React.FC = () => {
const limit = 10;
const launches = useQuery(GET_LAUNCHES, {
variables: { limit },
skip: !limit
});
const launchDescription = useQuery(GET_DESCRIPTION, {
variables: { id: launches?.data?.launches?.mission_id?.[0] },
skip: launches.loading || !launches?.data?.launches?.mission_id?.[0],
});
useEffect(() => {
console.log(launchDescription.data); // returns undefined
console.log(launches.data); // this returns correct data
}, [launches]);
return (
<HomeContainer
loading={launches.loading}
error={launches.error}
data={launches.data}
/>
);
}
Inside useEffect hook, I want to add description to each individual launch in launches.data array. How can I make this work?

Answer 1

You need to use optional chaining for launches?.loading or simply just omit this to !launches?.data?.launches?.mission_id?.[0]

Answer 2

Both of your queries right now are fired at the same time. What you need to do is make the second query wait for the first one to be completed (using useLazyQuery), and only fire when the ID is available.
Here is how that should look:
import React, { useEffect, useState } from 'react';
import { useQuery, useLazyQuery } from '#apollo/react-hooks';
import { HomeContainer } from '../Container/';
import { GET_POSTS, GET_DESCRIPTION } from '../Queries/';
export const Home: React.FC = () => {
const limit = 10;
const launches = useQuery(GET_POSTS, {
variables: { limit },
skip: !limit
});
// useLazyQuery provides a function you can use to fire the query
// only when you have what you need for it
const [getLaunchDescription, launchDescription] = useLazyQuery(GET_DESCRIPTION)
useEffect(() => {
// check that you have the id before you ask for the description
if (launches?.data?.launches?.mission_id?.length) {
getLaunchDescription({
variables: { id: launches.data.launches.mission_id[0] }
});
}
}, [launches])
return (
<HomeContainer
loading={launches.loading}
error={launches.error}
data={launches.data}
/>
);
}