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 客户端 (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 2

另一种解决方法是使用 props 选项。

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

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

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

Answer 3

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

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 4

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

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

Answer 5

恕我直言，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 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

根据此 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 8

  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 9

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

npm i -s lodash
import {flowRight} from 'lodash'
把compose的用法换成flowRight，其他代码都一样

Answer 10

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

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

React Apollo - 进行多个查询

React Apollo - Make Multiple Queries

javascript

apollo

reactjs

react-apollo