Graphql React-获取数据与graphql查询

时间:2019-09-19 07:44:11

标签: reactjs graphql

我只是从graphql和React开始。

我有一个类型,解析器,一个monogoDB和猫鼬模式都可以工作。

我正在使用playgoround,可以使用它进行查询和修改以更新数据库。

我现在的问题是从React进行查询并取回数据。

我的index.js是:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';

import { ApolloClient } from "apollo-client";
import { ApolloProvider } from "react-apollo";
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const cache = new InMemoryCache();
const link = new HttpLink({
  uri: 'http://localhost:4000/'
})

const client = new ApolloClient({
  cache,
  link
})

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

serviceWorker.unregister();

我在文件查询中有一个类似这样的查询 该查询在操场上有效

import { gql } from 'apollo-boost';

export const GET_ALL_RECIPES = gql`
  query{
    getAllRecipes{
      name
      description
    }
  }
`

我正在尝试获取日期:

import React from 'react';
import './App.css';

import { Query } from "react-apollo";
import { GET_ALL_RECIPES } from "../queries";

const App = () => (
  <div className="App">
    <h1>Home</h1>

    <Query query={GET_ALL_RECIPES}>
      {({ data, loading, error }) => {
        if (loading) return <div>Loading</div>
        if (error) return <div>Error</div>

        console.log(data)

        return (
          <p>Recipes</p>
        )

      }}
    </Query>

  </div>
)

export default App; 

在页面上显示正在加载,但console.log显示未定义。

1 个答案:

答案 0 :(得分:0)

这是实际的工作。我正在代理后面进行测试。我认为这是一个代理问题。