如何使用 React 在 Apollo 客户端中从第一个 api 调用收到的数据进行第二个 api 调用？

Question

I'm developing an Apollo GraphQL API for the Star Wars API ( https://swapi.dev/api/ ). I want to make a second API call using the data I get from the first API call in order to get the name property of the hometown in the second API call. I have managed to make the first API call, I'm now stuck on making the second API call using the data from the first api call.

My code for the first API call is shown below: (index.js)

 const restLink = new RestLink({ uri: "https://swapi.dev/api/" }); const client = new ApolloClient({ link: restLink, cache: new InMemoryCache(), });

First API call:

 import { useQuery, gql } from "@apollo/client"; const GET_CHARACTERS = gql` query { people @rest(path: "people/") { results { name height mass gender homeworld } } } `; const { error: peopleError, data: peopleData, loading: peopleLoading, } = useQuery(GET_CHARACTERS); return { peopleError, peopleData, peopleLoading, };

First API call is sent to: https://swapi.dev/api/people/ and it returns the object with data shown below (I have only shown the first object):

 { name: "Luke Skywalker", height: 172, age: 77, gender: "male", hometown: "https://swapi.dev/api/pl.nets/1/" }

After getting this, I have to make another call to the API ( https://swapi.dev/api/pl.nets/1/ ) that is brought back by hometown object key so that when I display the data, it will show the name property of the hometown in the API. The hometown API will have data like the one shown below:

 { "name": "Tatooine", "rotation_period": "23", "orbital_period": "304", "diameter": "10465", "climate": "arid", "gravity": "1 standard", "terrain": "desert", "surface_water": "1", "population": "200000", }

Answer 1

This is what is called a "Dependent Query". You can read about your exact case here: https://www.apollographql.com/blog/apollo-client/using-apollo-link-to-handle-dependent-queries/

The main thing is to use the skip option in your query configuration, like so:

const { data: profileData } = useQuery(PROFILE_INFO)
const planetId = profileData?.planet?.id
const { data: planetData } = useQuery(PLANET, 
    skip: !planetId, // Only run this query if the first query has completed
    variables: { planetId }
)

Answer 2

The challenge you are facing isn't "how to call a dependent query" as your title implies, but rather "how to call a dynamic number of queries".

React Query refers to this as dynamic parallel queries and provides a useQueries (notice the plural) hook to work with it. Apollo appears to not have such a feature . On the same issue, a GitHub user has posted their implementation of a useQueries hook for Apollo that you could use like so:

  const graphResults = useQueries(
    graphs.map(graph => ({
      query: GET_INSIGHT,
      variables: { ...graph, interval, from, to },
      /* specific useQuery options */
    })),
    { /* general useQuery options */ },
  );

In my opinion, a more appropriate solution to this is to solve it by writing your own hook for any query that requires N calls by invoking the Apollo client directly using ApolloClient.query . Here is my go at it with another schema:

function useRates(currencies) {
  const client = useApolloClient();
  const [results, setResults] = useState({});

  useEffect(() => {
    let isStale = false;
    setResults({});
    for (let currency of currencies) {
      const rates = client.query({
        query: ratesQuery,
        variables: { currency }
      });
      rates.then((result) => {
        if (!isStale)
          setResults((results) => ({ ...results, [currency]: result.data.rates }));
      });
    }
    return () => (isStale = true);
  }, [client, currencies.join(",")]);

  
  return results;
}

Demo: https://codesandbox.io/s/get-started-coinbase-client-forked-lfwtig?file=%2Fsrc%2Findex.js%3A744-1316