Как использовать client.query без JSX-компонентов в Apollo Client? - PullRequest
Новая
       32

Как использовать client.query без JSX-компонентов в Apollo Client?

0 голосов
/ 10 февраля 2019

Я пытаюсь сделать запрос в Apollo Client с React, не возвращая компонент JSX, просто объект (объект data, полученный при выполнении общего запроса к серверу Apollo).

Я попытался использовать компонент <Query />, но он возвращает мне React Node, и мне нужен только объект.Документация объясняет только методы, которые возвращают компоненты JSX в какой-то момент, когда все, что я хочу сделать, это отправить запрос и обработать ответ в обратном вызове.

На самом деле я пытаюсь таким образом (яиспользуя TypeScript в React): 

import React from 'react';
import { withApollo } from 'react-apollo';
import gql from 'graphql-tag';

const MY_QUERY = gql`
  query MY_QUERY {
    myQuery {
      attr1
      attr2
    }
  }
`;

const res = ({ client }: { client: any }) =>
  client
    .query(MY_QUERY)
    .then((data: { data: any }) => data);

withApollo(res);

console.log(res);

При этом я ищу такой объект, как 

{
  "data": {
    "myQuery": [
      {
        "attr1": "something 1...",
        "attr2": "another thing 1..."
      },
      {
        "attr1": "something 2...",
        "attr2": "another thing 2..."
      },
      {
        "attr1": "something 3...",
        "attr2": "another thing 3..."
      }
    ]
  }
}

Но я получаю из браузера 

ƒ WithApollo(props) {
    var _this = _super.call(this, props) || this;

    _this.setWrappedInstance = _this.setWrappedInstance.bind(_this);
    return _this;
}

Есть предложения?

1 Ответ

0 голосов
/ 11 февраля 2019

Попробуйте вместо этого 

class anyComponent extends React.Component<Props> {
   state = {
      results: null,
   }
   componentDidMount = async () => {
       const {client} = this.props;
       res = await client.query({query: MY_QUERY});
       console.log(res);
       this.setState({results: res})
   }
   render() {
       // check if any results exist (just an example)
       return results ? <AnyJsx results={results}/> : null;
   }
}
export default withApollo(anyComponent);

Вы вели консоль регистрации функции вместо вызова ее, чтобы получить ее результат Вам могут потребоваться некоторые функции жизненного цикла, такие как componentDidMount для получения данных

...