Question

我在我的应用程序中注册了我的突变，但遇到了问题。我在摘录中附有我的突变示例。我认为问题出在等待语法的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;

Graphql或React-Apollo在移动设备上无法从api获取数据

0 个答案: