我已经使用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;
我期望从服务器端实现的服务中获取数据。我还放置了调试点,但它不会将请求发送到服务。