CODEWITHSUNDEEP
javascriptreactjsgraphqlreact-apollo
AConsumer
AConsumer

Reputation: 2801

GraphQL+React+Apollo:Unable to fetch data from server to client

When i query server with the following:-

query{
  counterparty {
    name
  }
}

I get the desired output.

But when i try display the output in screen by rendering a componenet in react i get the following error:-

enter image description here

Following is the code in my client side:- My 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>
    );
  }
}

My 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>
);

Upvotes: 2

Views: 774

Answers (1)

Honza
Honza

Reputation: 703

Check your CORS settings, as the fetch request fails on the preflight OPTION request :)

Upvotes: 1

Related Questions