GraphQL + React + Apollo:无法从服务器获取数据到客户端

时间:2018-04-09 11:43:38

标签: javascript reactjs graphql react-apollo

当我使用以下内容查询服务器时: -

query{
  counterparty {
    name
  }
}

我得到了所需的输出。

但是当我尝试在反应中渲染组件时在屏幕上显示输出时出现以下错误: -

enter image description here

以下是我客户端的代码: - 我的App.js

import React, { Component } from 'react';
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import {ExchangeRates} from "./ExchangeComponent.jsx"

const client = new ApolloClient({
  uri: "https://localhost:5000/graphql"
}); 

export default class App extends Component {
  render() {
    return (
      <div>
        <ApolloProvider client={client}>
          <div>
            <h2>My first Apollo app </h2>
            <div><ExchangeRates/></div>
          </div>
        </ApolloProvider>
      </div>
    );
  }
}

我的ExchangeComponent: -

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

export const ExchangeRates = () => (
  <Query
    query={gql`
     {
    counterparty {
     name
    }
  }
    `}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;

      return  <div>
            data {data}
        </div>
    
    }}
  </Query>
);

1 个答案:

答案 0 :(得分:1)

检查您的CORS设置,因为预检OPTION请求的提取请求失败:)