因此,我想使用Apollo客户端反应挂钩“ useQuery”来查询运行Apollo Server的graphql后端。
但是定义的查询const将返回一个错误,该错误是:Uncaught TypeError:(...)不是函数,因此该页面根本没有呈现。
我的ApolloClient和提供程序设置如下:
index.js:
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { ApolloLink, from } from 'apollo-link';
import { ApolloProvider } from 'react-apollo';
import { createUploadLink } from 'apollo-upload-client';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './components/App';
import './index.css';
const uploadLink = createUploadLink({ uri: process.env.REACT_APP_API_URL });
const httpLink = new HttpLink({
uri: process.env.REACT_APP_API_URL,
credentials: 'same-origin'
});
const cache = new InMemoryCache();
const client = new ApolloClient({
link: ApolloLink.from([
onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.forEach(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
)
);
if (networkError) console.log(`[Network error]: ${networkError}`);
}),
httpLink,
uploadLink
]),
cache,
uri: process.env.REACT_APP_API_URL
});
render(
<ApolloProvider client={client}>
<Router>
<App />
</Router>
</ApolloProvider>,
document.getElementById('app')
);
应用组件将触发查询:
组件/游戏/GamePage.js:
import React, { Component } from 'react';
// import GameForm from './gameform';
import GameRules from './gamerules';
// import PropTypes from 'prop-types';
import { gql } from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
class GamePage extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.GET_ALL_PLAYERS = gql`
query allPlayers {
allPlayers {
id
name
nickname
}
}
`;
}
state = { selectedGame: 'X01' };
componentDidMount() {
// const players = this.props;
// players.loadPlayers().catch(err => {
// alert('Loading players failed. ' + err);
// });
const { loading, error, data } = useQuery(this.GET_ALL_PLAYERS);
if (loading) console.log('Loading...');
if (error) console.log(`Error! ${error.message}`);
console.log(data);
}
handleSubmit = gameObject => {
console.log(gameObject);
// this.props.createGame(gameObject);
};
handleGameChange = game => {
this.setState({
selectedGame: game
});
};
render() {
const styles = {
margin: '20px'
};
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-6">
<h2 style={styles}>Game Setup</h2>
{/* <GameForm
players={this.props.players}
onSubmit={this.handleSubmit}
onGameChange={this.handleGameChange}
/> */}
</div>
<div className="col-md-6">
<h2 style={styles}>Game Rules</h2>
<GameRules game={this.state.selectedGame} />
</div>
</div>
</div>
);
}
}
// GamePage.propTypes = {
// players: PropTypes.array,
// games: PropTypes.array,
// createGame: PropTypes.func.isRequired
// };
export default GamePage;
并且在加载应用程序时,它将得到我上面提到的错误。我按照每一个教程都可以在2小时内找到信息并进行插页和跟踪。但是我自己无法解决。后端工作正常。使用ApolloServer的Web服务器测试工具对其进行了测试。
有问题的部分是这样的:
this.GET_ALL_PLAYERS = gql`
query playersList {
allPlayers {
id
name
nickname
}
}
`;
以下是我收到的错误图片:
因此,任何帮助将不胜感激。
谢谢
编辑:将{gql}导入更改为gql后出现新错误
最佳答案
很难确定没有看到完整的错误(包括跟踪),但是我怀疑您没有正确导入from
。 apollo-link
模块确实导出了一个名为ApolloLink
的类,但是该类没有名为from
的静态方法。相反,您正在从同一模块中寻找另一个命名的导出:
import { from } from 'apollo-link'
还请注意,现在已弃用
react-apollo-hooks
模块,因为hooks API现在是react-apollo
的一部分。您应该升级react-apollo
并仅将单个ApolloProvider用于挂钩和任何旧组件。编辑:
查看您的错误,问题出在
GamePage
构造函数内部(注意第一行是at new GamePage
)。同样,这里还有一个导入问题,因为graphql-tag
没有名为gql
的命名导入。该模块仅具有默认导出,如文档所示:import gql from 'graphql-tag'
关于javascript - React Apollo Client useQuery Hook gql未捕获的TypeError:(…)不是函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59903983/