javascript - 如何使用react和react-apollo从graphql服务器获取数据？

Question

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

供引用:INDEX.JS 文件(可能正确)

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 文件(我认为这是正确的)

//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 .

编辑:因为您在传递给 graphql() 的配置对象中定义了名称属性 (AllParamsQuery)，所以您的查询结果将可以作为该 prop 而不是 data ——即“this.props.AllParamsQuery.params”。