Несколько запросов/мутация в Apollo 2.1

Ответ 1

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

Новый API-интерфейс ловушек для Apollo Client - более простой способ извлечения данных в ваше приложение 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>
);

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

Ответ 2

Для этого 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. Мне потребовалось немного, чтобы понять это.

Ответ 3

По моему мнению,

1. Чтобы сделать запрос, зависит от предыдущего запроса, вы можете разбить этот запрос на дочерний компонент и передать результат предыдущего запроса, например, props и выполнить этот запрос.

2. Чтобы использовать несколько мутаций и запросов, вы можете использовать compose like this

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

Ответ 4

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

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

Ответ 5

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

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

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

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