Question

我已经使用GraphQL的Spring Boot实现了服务器，我的请求网址是“ http://localhost:8080/graphql”。我已经测试过了，它与graphiql界面的配合很好。但是，当我尝试将React Apollo Client与我的服务器连接以发送请求时，它不起作用。我已经将uri放入我的ApolloClient配置中，但似乎无法正常工作。

我尝试使用默认的Apollo Client uri更改uri，但它也没有起作用。我以为我缺少有关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;

我期望从服务器端实现的服务中获取数据。我还放置了调试点，但它不会将请求发送到服务。

如何将Apollo客户端与Spring Boot应用程序连接

0 个答案: