React Apollo - 进行多个查询

Question

我有一个如下所示的查询文件：

import {gql} from 'react-apollo';

const queries = {
  getApps: gql`
    {
      apps {
        id
        name
      }
    }
  `,
  getSubjects: gql`
    {
      subjects {
        id
        name
      }
    }
  `
};

export default queries;

然后我将此文件导入我的 React 组件：

import React, {Component} from 'react'
import queries from './queries'

class Test extends Component {
...
}

export default graphql(queries.getSubjects)(graphql(queries.getApps)(Test));

这只会获取其中一个查询 (getApps) 的数据，而不是两者。如果我一次做一个，它看起来像这样：

export default graphql(queries.getSubjects)(Test);

然后它可以工作，但我没有其他查询。是的，我已经分别测试了它们并且它们有效。如何获取它以便两个查询都显示在我的 props.data 中？

Answer 1

Apollo 客户端使用Query Hooks 的出现；改变了一切。如果您在 2020 年或以后阅读本文；我很确定您可能正在使用 Apollo 客户端 useQuery 钩子。您可以根据需要多次调用 useQuery Hook 来执行这两个查询。您可以在其官方文档https://www.apollographql.com/docs/react/data/queries/ 中了解有关 useQuery 挂钩的更多信息，我发现它在我最近的项目中非常有用。例如

const queries = {
  getApps: gql`
    {
      apps {
        id
        name
      }
    }
  `,

  getSubjects: gql`
    {
      subjects {
        id
        name
      }
    }
  `
};

const { loading, error, data } = useQuery(queries);

const { loading:getSubjectsLoading, error:getSubjectsError, data:getSubjects } = useQuery(getSubjects);

if (loading || getSubjectsLoading) return "Loading...";
if (error || getSubjectsError ) return <p>Error :(</p>;


console.log(data);
console.log(getSubjects);

Answer 2

由于 compose 已从 apollo 中删除，因此有一个替代库，称为 lodash。 {flowRight} 方法的作用与 compose 相同。 只需按照以下步骤操作：-

1. npm i -s lodash

2. import {flowRight} from 'lodash'

3. 将 compose 的用法与 flowRight 交换，所有其他代码都一样。

Answer 3

  const { loading: cat_loading, cat_error, data: cat_data } = useQuery(categoriesAllQuery)
  const { loading: prod_loading, prod_error, data: prod_data } = useQuery(productsAllQuery)

  if (cat_loading || prod_loading) return <p>Loading ... </p>
  const { categoriesAll } = cat_data
  const { productsAll } = prod_data

Answer 4

根据此Link，要使用compose()，您需要按照以下步骤操作：

1- 使用npm i recompose安装“recompose”包

2- 使用import { compose } from "recompose";导入包

3- 以如下形式使用它：

export default compose(
  graphql(Query1, { alias: "Query1" }),
  graphql(Query2, { alias: "Query2" })
)(Test);

文档：https://www.apollographql.com/docs/react/api/react-apollo/

Answer 5

我的首选方式是使用 apollo 客户端 (docu) 的 compose 功能。

编辑： 如果您有多个查询，则应为它们命名。

所以在你的情况下，它可能看起来像这样：

import React, {Component} from 'react'
import queries from './queries'
import { graphql, compose } from 'react-apollo';

class Test extends Component {
...

  render() {
    ...
    
    console.log(this.props.subjectsQuery, this.props.appsQuery); // should show both 
    
    ...
  }
}

export default compose(
   graphql(queries.getSubjects, {
      name: "subjectsQuery"
   }),
   graphql(queries.getApps, {
      name: "appsQuery"
   }),
)(Test);

Answer 6

我正在使用react-adopt 来制作这个。这真的很简单，并且保持我们的代码干净。

简单示例：

import { adopt } from 'react-adopt';

...
render() {
  const Composed = adopt({
    first: ({ render }) => <Query query={FIRST_QUERY}>{ render }</Query>,
    second: ({ render }) => <Query query={SECOND_QUERY}>{ render }</Query>
  });

  return (
    <Composed>
      ({ first, second }) => {
        console.log('first', first)
        console.log('second', second)

        // validations (loading, error)

        return (
          <div>Your JSX</div>
        )
      }
    </Composed>
  )
}
...

有很多例子使用

const Composed = adopt({
  first: <Query query={FIRST_QUERY} />,
  second: <Query query={SECOND_QUERY} />
});

注意<Query>组件，它需要一个children，否则会报如下错误：

Warning: Failed prop type: The prop children is marked as required in Query, but its value is undefined.

为了避免前面的警告，我找到了一个可能的解决方案：

first: ({ render }) => <Query query={FIRST_QUERY}>{ render }</Query>

希望对你有帮助！

Answer 7

恕我直言，Apollo Client React implementation 中描述了最简洁的解决方案之一。
基本思想是将您的查询包装到嵌套的查询组件中。使用闭包函数作为子组件可以方便地将一个查询的结果委托给另一个查询，依此类推。

 const QueryOne = gql`
  query One {
    one
  }
`;

const QueryTwo = gql`
  query Two {
    two
  }
`;

const NumbersWithData = () => (
  <Query query={QueryOne}>
    {({ loading: loadingOne, data: { one } }) => (
      <Query query={QueryTwo}>
        {({ loading: loadingTwo, data: { two }}) => {
          if (loadingOne || loadingTwo) return <span>loading...</span>
          return <h3>{one} is less than {two}</h3>
        }}
      </Query>
    )}
  </Query>
);

Answer 8

对于Apollo 2.x：您可以使用react-adopt 将查询和突变组合成一个级别。 （该库将使用渲染道具组合任何组件，例如 React Context API。）

https://github.com/pedronauck/react-adopt

Answer 9

如果您不想单独重用这些查询中的任何一个，为什么不通过将两个查询合并为一个来发出单个请求，即：

const combinedQueries = gql`
{
  apps {
    id
    name
  }
  subjects {
    id
    name
  }
}
`

然后你就可以在你的组件中使用它了

import React, {Component} from 'react'
import combinedQueries from './combinedQueries'

class Test extends Component {
   ...
   render() {
     ...
     if(!this.props.combinedQueries.loading) {
       console.log(this.props.combinedQueries.apps);
       console.log(this.props.combinedQueries.subjects);
     }
     ...
   }
}

export default graphql(combinedQueries, {name: 'combinedQueries'})(Test);

Answer 10

解决此问题的另一种方法是使用props 选项。

export default compose(
  graphql(QUERY_2, {
    props: ({ data }) => ({ ...data }),
  }),
  graphql(QUERY_1, {
    props: ({ data }) => ({ ...data, myCustomAttribute: data.foo }),
  }),
)(Component);

我发现这种方法更适合我的用例。

这是文档的链接：https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-config-props