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

Я использую create-response-app с клиент apollo, и я следовал кодировке, которая находится на документы apollo. Мой сервер настроен на сервер apollo с экспрессом, и я его протестировал. последовали пути GraphQL Clients. Это работает, но когда я попытался использовать клиентский способ apollo, он не работает. Вот мой код.

В файле index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import ApolloClient from 'apollo-boost';
import {ApolloProvider} from 'react-apollo';

const client = new ApolloClient({
    uri: `/graphql`
});

ReactDOM.render(<ApolloProvider client={client}><App /></ApolloProvider>, document.getElementById('root'));
  • Я уже пытался изменить uri, например http://localhost:4000/graphql или http://localhost:4000

в файле App.js

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

const callQuery = gql`
{ 
  hello 
}
`;

class App extends Component {
  constructor(props) {
    super(props)
  }
  componentDidMount() {
    const test = this.HelloApi();
    console.log(test);
  }

  HelloApi() {
    <Query query={callQuery}>
      {({loading, error, data}) => {
        if(error) return `Error!: ${error}`;

        return data;
      }}
    </Query>
  }

render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Я не получил ответа через консоль и через Интернет. Пожалуйста, дайте мне знать, что мне не хватает. Спасибо.


reactjs graphql apollo-client react-apollo
person kainel    schedule 04.09.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

#withApollo

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

const callQuery = gql`
{ 
  hello 
}
`;

class App extends Component {
  constructor(props) {
    super(props)
}
  componentDidMount() {
    const test = this.props.client.query({ query: callQuery })
    console.log(test);
}

render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default withApollo(App);

сделав это, вы получите доступ к клиенту в методе жизненного цикла "componentDidMount ()"

ты можешь сделать:

componentDidMount() {
    const test = this.props.client.query({ query: callQuery })
    console.log(test);
}
person wrod7    schedule 04.09.2018
comment
Спасибо за советы. Я понял это, чтобы решить свою проблему с помощью ваших советов. Это не совсем то же самое, но помогло увидеть другие методы. - person kainel; 04.09.2018
comment
Без проблем. Компонент запроса, который вы использовали, обычно используется в методе рендеринга. вы можете консоль журнала в компоненте запроса. <Query query={callQuery}> {({loading, error, data}) => { if(error) return Error !: $ {error} ; console.log(data) return data; }} </Query> - person wrod7; 04.09.2018