Question

经过大约6-8个小时的尝试，我正在寻求帮助。 我想要的只是查询我的graphql服务器并将响应数据作为props输入我的react组件（参见ParameterBox.js）。请让我知道我做错了什么。

供参考：INDEX.JS FILE（可能正确）

import React from 'react';
import ReactDOM from 'react-dom';
import {
    ApolloClient,
    createNetworkInterface,
    ApolloProvider,
} from 'react-apollo';
import App from './App';


const networkInterface = createNetworkInterface({
    uri: 'http://localhost:3001/graphql'
});
const client = new ApolloClient({
    networkInterface: networkInterface
});

ReactDOM.render(
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>,
    document.getElementById('root')
);

供参考：APP.JS FILE（我认为这是正确的）

//App.js
import React, { Component } from 'react';
import ParameterBox from './ParameterBox';

class App extends Component {
    render(){
        return(
            <div>
                <ParameterBox />
            </div>
        )
    }
}
export default App;

PARAMETERBOX.JS文件（问题出在哪里，某处......）

//ParameterBox.js
import React, { Component } from 'react';
import axios from 'axios';
import { gql, graphql } from 'react-apollo';
import ParameterList from './ParameterList';

class ParameterBox extends Component {
    constructor (props) {
        super(props);
        this.state = { data: [] };
        this.loadParamsFromServer = this.loadParamsFromServer.bind(this);
    }
    //*** Old Method ***/
    // I still set my data using the old methods of API urls. I want to switch to GraphQL
    loadParamsFromServer(){
        axios.get('http://localhost:3001/api/params')
            .then (res => {
                this.setState({ data: res.data });
            })
    }
    //**** end old method ****/
    componentDidMount() {
        this.loadParamsFromServer();
    }
    render(){
        return(
            <div >
                <h2> Parameters: </h2>
                <p> HOW DO I GET IT HERE? {this.props.AllParamsQuery } </p>
                <ParameterList
                    data={ this.state.data }/>
            </div>
        )
    }
}

const AllParams = gql`
    query AllParamsQuery {
        params {
            id,
            param,
            input
        }
    }`;

export default graphql(AllParams, {name: 'AllParamsQuery'})(ParameterBox);

Answer 1

您可能会发现查看Apollo文档的基本查询here很有帮助。

当您使用graphql HOC包装组件时，它会将您的查询发送到服务器，然后将结果作为this.props.data提供给您的组件。因此，您的特定查询的结果将在this.props.data.params处找到（操作名称AllParamsQuery未在返回的数据中引用。）

要记住的另一件事是GraphQL是异步的，因此虽然props.data始终可用，但最初它将为空。你的渲染逻辑需要通过验证this.props.data.params在渲染它之前是否真实来解释这个事实。您还可以检查查询是否为still in flight or has completed。

修改：因为您在传递给AllParamsQuery的配置对象中定义了名称属性（graphql()），您的查询结果将作为该支柱而不是{ {1}} - 即＆＃39; this.props.AllParamsQuery.params`。

如何使用react和react-apollo从graphql server获取数据？

1 个答案: