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

Question

我正在为星球大战 API ( https://swapi.dev/api/ ) 开发一个 Apollo GraphQL API。 我想使用从第一个 API 调用中获得的数据进行第二个 API 调用，以便在第二个 API 调用中获取家乡的名称属性。 我已经成功拨打了第一个 API 电话，我现在坚持使用来自第一个 api 电话的数据进行第二个 API 电话。

我的第一个 API 调用代码如下所示：(index.js)

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

先拨打API：

 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, };

第一个 API 调用被发送到： https://swapi.dev/api/people/它返回 object，数据如下所示（我只显示了第一个对象）：

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

得到这个之后，我必须再次调用家乡object 密钥带回的 API ( https://swapi.dev/api/pl.nets/1/ ) 这样当我显示数据时，它会显示API 中家乡的名称属性。家乡 API 将具有如下所示的数据：

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

Answer 1

这就是所谓的“依赖查询”。 你可以在这里阅读你的确切案例： https://www.apollographql.com/blog/apollo-client/using-apollo-link-to-handle-dependent-queries/

最主要的是在查询配置中使用skip选项，如下所示：

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

正如您的标题所暗示的那样，您面临的挑战不是“如何调用依赖查询”，而是“如何调用动态数量的查询”。

React Query 将此称为动态并行查询，并提供一个useQueries （注意复数）钩子来处理它。 Apollo 似乎没有这样的功能。 在同一问题上，一位 GitHub 用户发布了他们为 Apollo 实现的useQueries挂钩，您可以像这样使用它：

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

在我看来，一个更合适的解决方案是通过使用ApolloClient.query直接调用 Apollo 客户端来为任何需要 N 次调用的查询编写自己的钩子来解决它。 这是我的 go 和另一个模式：

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;
}

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