javascript - React Apollo Client useQuery Hook gql Uncaught TypeError:(...) is not a function
问题描述
所以我想使用 Apollo Client 反应钩子“useQuery”来查询我运行 Apollo Server 的 graphql 后端。
但是定义的查询 const 将返回一个错误,即: Uncaught TypeError:(...) is not a function 因此页面根本没有呈现。
我的 ApolloClient 和 Provider 设置如下:
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')
);
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 小时内谷歌搜索和 YouTube 上找到的每个教程一样遵循。但我自己无法解决。除此之外,后端工作得很好。使用 ApolloServer 的 Webserver 测试工具对其进行了测试。
有问题的部分是这样的:
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 来处理 hooks 和任何遗留组件。
编辑:
查看您的错误,问题出在GamePage
构造函数内部(注意第一行是at new GamePage
)。同样,这里有一个导入问题,因为graphql-tag
没有一个名为gql
. 该模块只有一个默认导出,如文档中所示:
import gql from 'graphql-tag'
推荐阅读
- rust - 能。我们浓缩了多个相关的循环?
- java - Java Read and Play MIDI file using public static void midi(Score score) 方法
- html - 转换为一列布局时元素顺序不同的两列布局
- amazon-web-services - ParameterOverrides 属性在创建管道时无效 cloudformation
- python - 问:滚动 Pandas DataFrame 上的 fbProphet
- matlab - 八度音阶的 Groebner Base 算法
- outlook-redemption - 有没有办法像 MailItem.Reply 一样在 RDOMail.Reply 中保留签名?
- java - 如何正确初始化 javax.crypto.Cipher?
- r - 防止 venn 创建边框并使标签与彩色区域重叠
- jquery - jQuery - 选择