Graphql React - 通过 graphql 查询获取数据

Question

我刚刚开始使用 graphql 和 React。

我有一个类型、解析器、一个 monogoDB 和 mongoose 模式都在工作。

我有 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 显示未定义。

Answer 1

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