Question

我正在使用GraphQL和Apollo编写一个简单的登录表单。每次用户登录后，它都会重新获取查询以获取用户数据。

import React, {Component} from 'react'
import AuthForm from './AuthForm'
import loginMutation from '../mutations/Login'
import { graphql } from 'react-apollo'
import userQuery from '../queries/CurrentUser'

//App.js

...
const networkInterface = createNetworkInterface({
  uri: '/graphql',
  opts: {
    credentials: 'same-origin',
  }
})

const client = new ApolloClient({
  dataIdFromObject: o => o.id,
  networkInterface
})
...

//Login.js
class LoginForm extends Component {

onSubmit({ email, password }) {
    this.props.mutate({
        variables: { email, password },
        refetchQueries: [{ userQuery, varibles: null }]
    })
}

render() {
    return (
        <div>
            <h3>Login</h3>
            <AuthForm onSubmit={ this.onSubmit.bind(this) }/> 
        </div>
    )
}
}


export default graphql(loginMutation)(LoginForm)
//userQuery.js
import gql from 'graphql-tag'

export default gql`
    {
        user{
            id
            email
        }
    }
`

问题是用户可以登录但是没有获得用户查询。相反，我不断收到此错误消息： Uncaught (in promise) Error: Network error: Cannot read property 'kind' of undefined at new ApolloError (bundle.js:6231)。我找不到这个问题的原因。所以，任何人都可以帮助我解决这个问题，

Answer 1

refetchQueries: [{ userQuery, varibles: null }]

在refetchQueries属性中的数组内部，您有一个要解构的对象userQuery，在解构时将是{ userQuery: userQuery }。 Apollo Client无法识别此属性，它应该为{ query: userQuery }。您在varibles: null中也有拼写错误。应该是variables: null。

更正的代码：

onSubmit({ email, password }) {
    this.props.mutate({
        variables: { email, password },
        refetchQueries: [{ query: userQuery, variables: null }]
    })
}

Apollo - Uncaught（in promise）错误：网络错误：无法读取未定义

1 个答案: