Множественные запросы / мутации в Apollo 2.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 {
    ...
   }
   

изменить 2019/08/24 с Аполлона документы:

The new hooks API for Apollo Client is a simpler way to fetch data in your React app without the boilerplate of render prop components and higher-order components (HOC). We recommend using hooks for all new Apollo code going forward.

оригинальный ответ: Вы должны их вить. См. Этот пример:

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

Чтобы упростить управление вложением, вы можете проверить реагировать-усыновлять. У них есть пример приложения Apollo ToDo, в котором они сочетают запрос и несколько мутаций.

Я написал Средний пост о том, как объединить мутацию и запрос в одном компоненте. Вот отрывок из сообщения

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

Для этого 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.info(this.props), и вы увидите, что сейчас происходит с реквизитом. Теперь у вас будет два свойства: getAuthors и addTweet. Итак, теперь это будет this.props.name-in-compose.name-of-type-in-typeDefs, то есть this.props.getAuthors.getUsers. Мне потребовалось немного времени, чтобы понять это.

Помимо использования compose из react-apollo, вы можете попробовать еще одну отличную библиотеку утилит - реагировать-усыновлять. Отличная небольшая служебная библиотека, которая помогает вам составлять компоненты типа несколькоrender props, чтобы у вас не было вложенных шаблонов ада.

Я написал аналогичный ответ, который в основном покрывает все ваши текущие потребности с точки зрения:

• Как использовать предыдущий результат от вашего картографа fn с помощью react-accept
• Объедините несколько запросов / мутаций из составного компонента с помощью реакции-принятия

Вот подробный ответ, который вы ищете и, надеюсь, может помочь в решении ваших проблем :)

Лучшее решение для этого

Просто вложите функцию graphql

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

Вы можете сослаться на это

Концепции Аполлона