React Apollo Client useQuery Hook gql Uncaught TypeError:(...) is not a function
React Apollo Client useQuery Hook gql Uncaught TypeError:(...) is not a function
所以我想使用 Apollo Client react hook "useQuery" 来查询我的 graphql 后端 运行 Apollo Server。
但是定义的查询常量 return 会给我一个错误:Uncaught TypeError:(...) is not a function and thus the page is not rendering at all.
我的 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 组件将触发查询:
components/game/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 小时内使用谷歌搜索和 youtubing 找到的所有教程一样进行了学习。但我无法自己解决。此外,后端工作正常。用ApolloServer的Webserver测试工具测试过。
有问题的部分是这样的:
this.GET_ALL_PLAYERS = gql`
query playersList {
allPlayers {
id
name
nickname
}
}
`;
以下是我收到的错误图片:
因此,我们将不胜感激。
谢谢
编辑:将 {gql} 导入更改为 gql 后出现新错误
如果没有看到您的完整错误(包括跟踪),很难确定,但我怀疑您没有正确导入 from
。 apollo-link
模块确实导出了一个名为 ApolloLink
的 class,但是这个 class 没有名为 from
的静态方法。相反,您正在寻找来自同一模块的另一个命名导出:
import { from } from 'apollo-link'
另请注意,react-apollo-hooks
模块现已弃用,因为挂钩 API 现在是 react-apollo
的一部分。您应该升级 react-apollo
并仅将单个 ApolloProvider 用于挂钩和任何遗留组件。
编辑:
查看您的错误,问题出在 GamePage
构造函数内部(注意第一行是 at new GamePage
)。同样,这里有一个导入问题,因为 graphql-tag
没有名为 gql
的命名导入。该模块只有文档中所示的默认导出:
import gql from 'graphql-tag'
所以我想使用 Apollo Client react hook "useQuery" 来查询我的 graphql 后端 运行 Apollo Server。
但是定义的查询常量 return 会给我一个错误:Uncaught TypeError:(...) is not a function and thus the page is not rendering at all.
我的 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 组件将触发查询:
components/game/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 小时内使用谷歌搜索和 youtubing 找到的所有教程一样进行了学习。但我无法自己解决。此外,后端工作正常。用ApolloServer的Webserver测试工具测试过。
有问题的部分是这样的:
this.GET_ALL_PLAYERS = gql`
query playersList {
allPlayers {
id
name
nickname
}
}
`;
以下是我收到的错误图片:
因此,我们将不胜感激。 谢谢
编辑:将 {gql} 导入更改为 gql 后出现新错误
如果没有看到您的完整错误(包括跟踪),很难确定,但我怀疑您没有正确导入 from
。 apollo-link
模块确实导出了一个名为 ApolloLink
的 class,但是这个 class 没有名为 from
的静态方法。相反,您正在寻找来自同一模块的另一个命名导出:
import { from } from 'apollo-link'
另请注意,react-apollo-hooks
模块现已弃用,因为挂钩 API 现在是 react-apollo
的一部分。您应该升级 react-apollo
并仅将单个 ApolloProvider 用于挂钩和任何遗留组件。
编辑:
查看您的错误,问题出在 GamePage
构造函数内部(注意第一行是 at new GamePage
)。同样,这里有一个导入问题,因为 graphql-tag
没有名为 gql
的命名导入。该模块只有文档中所示的默认导出:
import gql from 'graphql-tag'