Как подключить Apollo Client к Spring Boot Application - PullRequest
Новая
       4

Как подключить Apollo Client к Spring Boot Application

0 голосов
/ 15 апреля 2019

Я реализовал сервер с Spring Boot для GraphQL, и мой URL-адрес запроса "http://localhost:8080/graphql". Я протестировал, и он довольно хорошо работает с интерфейсом graphiql. Однако, когда я пытаюсь подключить React Apollo Client с моим сервером котправить запрос, это не работает. Я уже поместил URI в свою конфигурацию ApolloClient, но, похоже, он не работает.

Я попытался изменить URI с URI клиента Apollo по умолчанию, и он также не работалЯ предполагаю, что что-то упущено в React Apollo Client.

App.js 

import React, { Component } from 'react';
import 'semantic-ui-css/semantic.min.css';
import './App.css';
import {
  Grid,
  Image,
  Divider,
  Menu,
  Segment,
  Sidebar,
  Icon,
  Header
} from 'semantic-ui-react';
import logo from './resources/logo.png';
import BlogHeader from './scenes/header/BlogHeader';
import BlogMain from './scenes/main/BlogMain';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

const client = new ApolloClient({
  uri: 'http://localhost:8080/graphql',
  fetch: 
});

const App = () => (
  <ApolloProvider client={client}>
    <div className="wrapper">
      <Grid>
        <Grid.Column width={3}>
          <BlogHeader />
        </Grid.Column>
        <Grid.Column width={13}>
          <BlogMain />
        </Grid.Column>
      </Grid>
    </div>
  </ApolloProvider>
);

export default App;

BlogMain.js (где я делаю свой запрос) 

import React, { Component } from 'react';
import './BlogMain.css';
import PostCard from '../post/PostCard';
import { Grid } from 'semantic-ui-react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

class BlogMain extends Component {
  findRecentPosts = (pageNumber, pageSize) => (
    <Query
      query={gql`
        query findRecentPosts($pageNumber: Int, $pageSize: Int) {
          findRecentPosts(pageNumber: $pageNumber, pageSize: $pageSize) {
            id
            title
            description
          }
        }
      `}
      variables={{ pageNumber, pageSize }}
    >
      {({ loading, error, data }) => {
        if (loading) return null;
        if (error) return `Error!: ${error}`;

        return data;
      }}
    </Query>
  );

  render() {
    console.log(this.findRecentPosts(0, 1));
    return (
      <div className="mainWrapper">
        <Grid padded stackable>
          <Grid.Row columns={3} centered>
            <Grid.Column>
              <PostCard />
            </Grid.Column>
            <Grid.Column>
              <PostCard />
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </div>
    );
  }
}

export default BlogMain;

Iожидал получить данные от моего сервиса, который я реализовал на стороне сервера. Я также поставил точку отладки, но она не отправляет запрос в сервис.

...