javascript - 使用 Apollo 客户端时,GraphQL 突变未发送到请求?

标签 javascript reactjs graphql

当使用 'apollo-boost'< 中的 { ApolloClient } 向后端服务器发送自定义 header 时,我遇到了无法指定 URI 的问题,
所以我不得不使用 'apollo-client' 中的 {ApolloClient } 来代替。

<小时/>

该问题已解决,但现在我的突变没有发送到后端?

我的突变:

import { gql } from 'apollo-boost';

export const LOGIN_USER = gql`
  mutation($email: String!, $password: String!) {
    loginUser(email: $email, password: $password) {
      userId
      token
      expiresIn
    }
  }
`
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = new HttpLink({
  uri: 'http://localhost:3001/graphql'
})

const authLink = setContext((_, { headers }) => {
  const store = JSON.parse(sessionStorage.getItem('interdevs-data'));
  const token = store.token;

  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});
  const login = async (email, password) => {
    try {
        const user = await loginUser({
          variables: {
            email,
            password
          }
        });
        const { userId, token, expiresIn } = user.data.loginUser;

        setUserData({
          token: token,
          userId: userId,
          expiresIn: expiresIn
        });

        sessionStorage.setItem('interdevs-data', JSON.stringify({ 
          "token": token, 
          "userId": userId, 
          "expiresIn": expiresIn 
        }));
    } catch(err) {
      console.log('login error: ', err);
      setLoginErr(err);
    };
  };

这是我收到的错误。

"Error: Network error: Cannot read property 'token' of null"

当我将其切换回从 apollo-boost 导入 ApolloClient 时,它会再次工作。

<小时/>

非常感谢任何帮助!

最佳答案

不是100%确定,但我认为错误在于:

const store = JSON.parse(sessionStorage.getItem('interdevs-data'));
const token = store.token;

如果没有带有键 interdevs-data 的项目,store 将为 null

我认为你可以通过这样做来解决它:

const store = JSON.parse(sessionStorage.getItem('interdevs-data'));
const token = store ? store.token : null;

关于javascript - 使用 Apollo 客户端时,GraphQL 突变未发送到请求?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58220869/

相关文章:

javascript - 所有事件的本地存储

reactjs - 使用 Redux 两个 React 表单组件之间的通信

javascript - webpack 获取 material-ui 的正确方法

orm - GraphQL, Dataloader, [ORM 与否], 有很多关系理解

javascript - 如何在函数中将数据发送到firebase数据库

javascript - 联系表单响应非常慢(PHP/jQuery/Ajax)

android - 当文本输入聚焦在 React Native for Android 的底部工作表上时, View 移出屏幕

angular - 使用 GraphQl 的 Apollo 客户端时如何在 watchQuery 中使用加载属性

graphql - Netlift 构建 : gatsby-source-prismic - Invalid plugin options | Environment variables in Netlify

javascript - 为位于路线上的谷歌地图标记设置信息窗口(起点和终点)