我在我的应用程序中注册了我的突变,但遇到了问题。 我在摘录中附有我的突变示例。我认为问题出在等待语法的react-apollo或async包。我使用babel将整个代码转换为es5。但是我找不到错误。
在台式机上的所有工作都很好,但是在设备上我遇到了这个查询或突变问题。
当我单击手机上的“混音器”按钮时,什么都没发生,我试图发出一个调试提示,但没有任何提示。
我在所有移动设备上也提到了我从graphql“获取”数据时遇到的问题。在前端,我使用react和react-apollo
import { connect } from 'react-redux';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { setUser } from 'Actions/loggedUser';
import Register from './Register';
const REGISTER_MUTATION = gql`
mutation registerUser(
$email: String!,
$password: String!,
) {
registerUser(
email: $email,
password: $password,
) {
user {
id
}
sessionToken
}
}
`;
const RegisterWithData = graphql(
REGISTER_MUTATION,
{
props: ({ mutate }) => ({
registerUser: async (variables) => {
const { data } = await mutate({ variables: { email: 'test@test.com', password: 'password' } });
alert(data);
}
})
}
)(Register);
export default connect(
state => ({
user: state.user,
}),
{
setUser,
}
)(RegisterWithData)
我的package.json:
{
"name": "Alex_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --progress --profile --colors --config webpack.dev.js",
"build:dev": "yarn clean && webpack --progress --profile --colors --config webpack.dev.js",
"build:prelive": "yarn clean && NODE_ENV=prelive webpack --profile --colors --config webpack.prod.js",
"build:prod": "yarn clean && webpack --profile --colors --config webpack.prod.js && yarn copy:files"
},
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.1.5",
"@material-ui/core": "^3.5.1",
"@material-ui/icons": "^3.0.1",
"apollo-cache-inmemory": "^1.3.10",
"apollo-client": "^2.4.6",
"apollo-link": "^1.2.3",
"apollo-link-context": "^1.0.10",
"apollo-link-error": "^1.1.1",
"apollo-link-http": "^1.5.5",
"autoprefixer": "^9.3.1",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"css-loader": "^1.0.1",
"file-loader": "^2.0.0",
"graphql": "^14.0.2",
"graphql-tag": "^2.10.0",
"immutability-helper": "^2.8.1",
"node-sass": "^4.10.0",
"postcss-loader": "^3.0.0",
"qr-image": "^3.2.0",
"react": "^16.6.1",
"react-apollo": "^2.3.1",
"react-dom": "^16.6.1",
"react-redux": "^5.1.1",
"react-router-dom": "^4.3.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-react-loader": "^0.4.6",
"validator": "^10.9.0",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.4"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.1.5",
"@babel/preset-react": "^7.0.0",
"compression-webpack-plugin": "^2.0.0",
"eslint": "^5.9.0",
"eslint-plugin-react": "^7.11.1",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.4",
"path": "^0.12.7",
"redux-devtools-extension": "^2.13.5",
"uglifyjs-webpack-plugin": "^2.0.1"
}
}
Apollo客户端设置:
import { ApolloClient, createNetworkInterface } from 'apollo-client';
import { from } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ERROR_CODES } from 'Constants';
import { getSessionToken, removeSessionToken } from 'Utils/auth';
import { onError } from 'apollo-link-error';
const errorLink = onError(({ graphQLErrors }) => {
if (graphQLErrors) {
if (graphQLErrors.find(err => err && err.data && err.data.status === ERROR_CODES.UNAUTHORIZED)) {
removeSessionToken();
history.replace('/login');
}
}
});
const middlewareLink = setContext(() => ({
headers: {
authorization: getSessionToken() || null,
},
}));
// @todo: replace localhost with config.api
const httpLink = new HttpLink({ uri: 'http://localhost:4000/', credentials: 'same-origin' })
const client = new ApolloClient({
link: from([middlewareLink, errorLink, httpLink]),
cache: new InMemoryCache(),
});
export default client;