反应阿波罗 - 进行多次查询

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

我首选的方法是使用composeapollo客户端(docu)的功能.

编辑:如果您有多个查询,您应该命名它们.

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

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

恕我直言，最简洁的解决方案之一在Apollo Client React实施中进行了介绍。
基本思想是将查询包装到嵌套的Query组件中。将闭包函数用作子组件，可以很方便地将一个查询的结果委托给另一个查询，依此类推。

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

我正在使用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>组件，它需要一个子组件，否则将出现以下错误：

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 5

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

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

Answer 6

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

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