Не могу программно получить данные с клиентом Apollo - PullRequest
Новая
       20

Не могу программно получить данные с клиентом Apollo

0 голосов
/ 26 апреля 2019

Большая часть информации о клиентах Apollo и запросах GraphQL касается извлечения данных и немедленной визуализации чего-либо.

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

Используйте следующий фрагмент кода в качестве примера 

onRefChange (formValues) {

    let { project, ref } = formValues
    let projectFound = find(this.state.projects, (o) => { return o.id === project.value } )

    let variables = {
      slug: projectFound.slug, ref: parseInt(ref)
    }
    console.info('variables ready', variables)
    return (
      <Query query={RESOLVE_REF} variables={variables}>
        { ({ data, error }) => {
          console.info('data response', data)
          console.info('error response', error)
          return data
        }}
      </Query>
    )
  }

Apollo заставляет меня использовать компонент Query просто для выполнения запроса, даже когда я не хочу ничего визуализировать. Кроме того, эти console.info никогда ничего не регистрируют, но текст с готовыми переменными появляется.

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

Я также обеспокоен тем, что Аполлон, похоже, не уважает разделение обязанностей, по-видимому, объединяя данные и представление в одну ответственность (как ясно с компонентом Query), что в моем нынешнем понимании вполне глупо, но, скорее всего, я облажался.

Любое понимание приветствуется.

1 Ответ

1 голос
/ 26 апреля 2019

Если вы настроили и включили ApolloProvider в верхней части дерева компонентов, вы можете получить экземпляр запроса, используя либо withApollo HOC, либо ApolloConsumer : 

const MyComponent = ({ client }) => {
 // use it!
}
withApollo(MyComponent)

<ApolloConsumer>
  {client => (
    // use it!
  )}
</ApolloConsumer>

Затем можно использовать любой из методов, доступных для экземпляра клиента, включая query и mutation, оба из которых возвращают Promise, который разрешается дляApolloQueryResult объект, который включает data и errors.Полную документацию по API клиента можно найти здесь .Ваш код будет выглядеть примерно так: 

async onRefChange (formValues) {
  let { project, ref } = formValues
  let projectFound = find(this.state.projects, (o) => { return o.id === project.value } )

  let variables = {
    slug: projectFound.slug, ref: parseInt(ref)
  }
  try {
    const { data } = await this.props.client(RESOLVE_REF, { variables })
  } catch (e) {
    // Handle errors
  }
}
...