Различные способы запроса с реагировать-Аполлон - PullRequest
Новая
       4

Различные способы запроса с реагировать-Аполлон

0 голосов
/ 29 июня 2018

Мы начали использовать response-apollo@2.1 в одном из наших приложений реагировать на избыточность, и мы пытаемся заменить большую часть избыточного содержимого на graphql. Поэтому мы начали использовать компонент <Query> и преобразовали некоторые страницы для использования компонента <Query>. Но на некоторых страницах у нас есть некоторая существующая логика, которая использует события жизненного цикла реакции, такие как componentWillReceiveProps, и если мы использовали компонент <Query>, то эти события не будут запущены, и если мы будем использовать запрос типа HOC, как показано ниже, то события жизненного цикла будут запущены и мы получим данные в реквизит

экспорт по умолчанию graphql (GET_APP_INFO, { options: ownProps => ({ переменные: {appName: ownProps.params.app} })})

Насколько я понимаю, этот компонент является последним способом запроса, а HOC - старым способом, который может устареть, также я нашел другой способ запроса с помощью withApollo (), как показано ниже.

this.props.client.query ({ запрос: gql ..., переменные: {...}, });

Поэтому я ищу предложения о том, когда использовать эти различные типы шаблонов запросов для получения данных.

Ответы [ 2 ]

0 голосов
/ 29 июня 2018

если вы хотите использовать React-Apollo и запустить Query Dynamic, например, внутри ReactLifeCycleMethod или любым другим способом (в некоторых случаях, когда любой триггер прослушивателя событий), вы можете использовать Client для доступа к Query или Mutation

React-Apollo имеет Consumer с React Context API

на верхнем уровне вашего приложения вы реализуете ApolloProvider следующим образом 

 <ApolloProvider client={client} >
    < App />
 </ApolloProvider>

и теперь у вас есть клиент доступа

Вы можете создать запрос с клиентом 

  client.query()

или 

  client.mutate()

и если вы хотите использовать клиент в другом компоненте, который вы должны использовать (например, реагировать на новый Context API) 

  class App extends React.Component {
     render()  {
        return(
           <ApolloConsumer >
              { client => { 

                <MyComponent accessClient={client} />

              } }
           <ApolloConsumer>  
          )
       }      
  }

теперь вы можете получить доступ к клиенту как реквизит 

         class App extends React.Component {

            componentDidMount() {

                  this.props.accessClient.query( ... )
              }


     render()  {
        return( 
          ....
          )

       }}

https://www.apollographql.com/docs/react/essentials/queries.html#manual-query

0 голосов
/ 29 июня 2018

Компонент Query и Graphql HOC имеют одинаковую базовую функциональность, поэтому с этой точки зрения не должно быть никаких различий. В вашем примере компонента Query не запущены методы жизненного цикла, вы можете переместить компонент Query на один уровень выше компонента, и он будет работать точно так же. Так что-то вроде этого: 

const CompQueryWrapper = () => {
  return (
    <Query ...>
      {({ data, loading, error }) => <CompWithLifecycle data={data} />}
    </Query>
}

Вы также можете переместить логику жизненного цикла на уровень. реакция / компонент иногда может быть полезна в этом случае, когда вы просто хотите, чтобы что-то сработало при смене реквизита, но не хотите проходить церемонию создания нового компонента класса.

Так что да, для вашей конкретной ситуации я бы порекомендовал переместить запрос вверх, чтобы он запускал жизненный цикл, или переместить логику жизненного цикла вниз, чтобы его можно было запускать по результату запроса.

В целом, два компонента, которые я использую для выполнения запросов:

  1. Компонент запроса
  2. ApolloConsumer (это просто рендер-версия с withApollo)

Если я могу использовать компонент Query, я использую компонент Query. Это работает для большинства ситуаций. Вариант использования ApolloConsumer для запросов - это когда вы не хотите немедленно инициировать запрос. Например, скажем, у вас есть форма, которая требует некоторой информации от пользователя, а затем получает некоторые данные на основе этого ввода. Это не мутация, поскольку мы не меняем данные, но не хотим, чтобы они запускались немедленно, как это делает компонент Query. В этом случае используйте ApolloConsumer для получения экземпляра клиента и выполните запрос с помощью client.query.

...