Apollo 2.1 中的多个查询/突变

Question

在使用 Apollo 2.1 中的新查询和突变组件时，我需要一些帮助，尤其是对于多个查询和突变。

我有以下问题：

1. 我有一个依赖于之前的 graphql 结果的 graphql 请求，我该如何处理？
2. 如何在已经有查询的组件中添加两个不同的突变（在我的组件中我需要执行两个不同的操作）？

Answer 1

在我看来，

1. 要根据先前的请求发出请求，您可以将该请求中断给子组件，并将先前请求的结果（如 props）传递给它并执行该请求。

2. 要使用多个突变和查询，您可以像这样使用compose

   ...
   @compose(
    graphql(GET_FEEDS_QUERY, {name : 'getFeeds'}),
    graphql(CREATE_NEW_POST, {name: "createNewPost"}),
    graphql(LIKE_POST_MUTATION, { name: "unlikePostMutation"}),
    ...
   )
   class HomeScreen extends Component {
    ...
   }
   

Answer 2

编辑 2019/08/24 来自阿波罗docs：

Apollo 客户端的新钩子 API 是一种更简单的方式来获取数据 您的 React 应用程序没有渲染道具组件的样板和 高阶组件（HOC）。我们建议对所有新用户使用挂钩 未来的阿波罗代码。

原答案： 你应该嵌套它们。看这个例子：

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

为了帮助保持嵌套易于管理，您可以查看react-adopt。他们有一个 Apollo ToDo App 示例，其中结合了一个 Query 和多个 Mutation。

Answer 3

我写了一个Medium Post，关于如何在同一个组件上组合 Mutation 和 Query。 这是帖子中的一个sn-p

// other import
import {Query} from “Apollo-graphql”; // new Query Component
import gql from "graphql-tag";
import { graphql } from "react-apollo";
import UserComponent from '../component/UserComponent'; // any component to display query result
const GET_ALL_USER = gql`
    {
        allUsers: {
            firstname,
            lastname,
            username,
            # other information
        }
    }
`
const UPDATE_USER_STATUS = gql`
    mutation UpdateUserStatus($userID: ID!, $status: Int!){
        updateUserState(userID: $userID, status: $status){
            firstname,
            lastname
            username
            # other information
        }
    }
`
ExampleComponent extends React.Component{
    onEditInformation = async (user) => {
        const response  = await mutate({
            variables: {userID: user}
        })
    }
render(){
        return(
            <Query query={GET_ALL_USER}>
                {({data: { allUsers }}) => {
                    return allusers.map(user => {
                        return (
                            <UserComponent
                                user={user}
                                onEdit={() => this.onEditInformation(user)}
                            />
                        )
                    })
                }}
            </Query>
        )
    }
}
export default graphql(UPDATE_USER_STATUS)(ExampleComponent);

Answer 4

为此，react-apollo 导出了一个compose 函数。使用此功能，您可以一次干净地使用多个组件增强器。包括多个 graphql()，甚至 Redux connect() 增强器。

import { Mutation, compose, graphql } from "react-apollo";

class AddTweet extends Component {
....
....
....
}
export default compose(
  graphql(GET_AUTHORS, { name: "getAuthors" }),
  graphql(ADD_TWEET, { name: "addTweet" }),
  connect(...), // incase you are using Redux
)(AddTweet);

一个重要的注意事项是compose()首先执行最后一个增强器，然后在增强器列表中向后工作。

还有一件事，假设您使用的是this.props.data，现在您将获得undefined。只要console.log(this.props)，你就会看到道具现在发生了什么。您现在将拥有两个属性getAuthors 和addTweet。所以现在它将是this.props.name-in-compose.name-of-type-in-typeDefs，即this.props.getAuthors.getUsers。我花了一点时间才弄明白。

Answer 5

除了使用react-apollo 中的compose 之外，您可以查看的另一个很棒的实用程序库是react-adopt。一个很棒的小型实用程序库，可帮助您组合 多个 render props 类型的组件，因此您没有嵌套的地狱模式。

我写了一个similar answer，基本上涵盖了您当前的所有需求：

• 如何通过 react-adopt 使用映射器 fn 的先前结果
• 通过 react-adopt 组合来自 Composed 组件的多个 Query/Mutations

这是您正在寻找的detailed answer，希望对解决您的问题有所帮助:)

Answer 6

最好的解决方案

简单嵌套graphql函数

export default graphql(addBookMutation)(graphql(getAuthorsQuery)(AddBook))

你可以参考这个

Apollo concepts