Apollo GraphQL React - как сделать запрос по клику?

Question

В документах Apollo React http://dev.apollodata.com/react/queries.html есть примеры автоматической выборки при показе компонента, но я бы хотел выполнить запрос при нажатии кнопки. Я вижу пример "повторного" извлечения запроса при нажатии кнопки, но я не хочу, чтобы он запрашивал изначально. Я вижу, что есть способ вызывать мутации, но как вы называете запросы?

Answer 1

Вы можете сделать это, передав ссылку на клиент Apollo, используя withApollo компонент высшего порядка, как описано здесь: https://www.apollographql.com/docs/react/api/react-apollo.html

Затем вы можете позвонить client.query на переданный в объект, вот так:

class MyComponent extends React.Component {
  runQuery() {
    this.props.client.query({
      query: gql`...`,
      variables: { ... },
    });
  }

  render() { ... }
}

withApollo(MyComponent);

Из любопытства, какова цель запуска запроса по событию клика? Возможно, есть лучший способ достичь основной цели.

Answer 2

Начиная с версии 3.0, вы можете сделать это двумя способами.

client.query

Первый способ - позвонить ApolloClientс queryметод. Это возвращает обещание, которое будет разрешено в результате запроса. Вы можете получить ссылку на клиента, используя withApollo HOC:

class MyComponent extends React.Component {
  handleClick() {
    const { data } = await this.props.client.query({
      query: gql`...`,
      variables: { ... },
    })
    ...
  }
  ...
}

withApollo(MyComponent)

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

const MyComponent = () => (
  <ApolloConsumer>
    {client => {
      ...
    }
  </ApolloConsumer>
)

или хук useApolloClient:

const MyComponent = () => {
  const client = useApolloClient()
  ...
}

useLazyQuery

Второй способ - использовать хук useLazyQuery:

const MyComponent = () => {
  const [runQuery, { called, loading, data }] = useLazyQuery(gql`...`)
  const handleClick = () => runQuery({ variables: { ... } })
  ...
}