4

我正在尝试使用以下查询组成一个反应组件，但query getMe始终是一个对象，然后我得到TypeError: this.props.getMe is not a function. 如果我将其更改为突变，则一切正常。如果我在 graphiql Web 界面中使用查询，它也可以工作。我的想法不多了。任何人都发现了一些明显的东西。

有问题的部分

const getMe = gql`
    query
    {
        viewer
        {
            _id
            name
            email
            gender
            birthday
            picture
            role
            facebookId
            facebookEmail
            token
        }
    }
`

export default compose(
  graphql(login, {name : 'authorizeUser'}),
  graphql(logout, {name : 'deauthorizeUser'}),
  graphql(getMe, {name : 'getMe'}),
)(App);

这是整个文件

以防万一它有帮助

import React from 'react';
import { Button } from 'reactstrap'
import FacebookLogin from 'react-facebook-login';
import { compose, graphql } from 'react-apollo';
import gql from 'graphql-tag';
import './App.css';


class App extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = { loggedin: !!window.localStorage.getItem('token') };
    }

    login(res)
    {
        this.props.authorizeUser({
            variables: { accessToken: res.accessToken }
        })
        .then((data) => {
            console.log('got token', data.data.authorizeUser.token);
            window.localStorage.setItem('token', data.data.authorizeUser.token)
            this.setState({ loggedin: true, user: data.data.authorizeUser })
            console.log(this.state)
        }).catch((error) => {
            console.log('there was an error sending the query', error);
            window.localStorage.removeItem('token')
            this.setState({ loggedin: true })
        });
    }

    logout()
    {
        const token = window.localStorage.getItem('token')

        if (!token) {
            window.localStorage.removeItem('token')
            this.setState({ loggedin: false })
            return
        }

        this.props.deauthorizeUser({
            variables:{ token }
        })
        .then((data) => {
            console.log('destroyed token', data);
            window.localStorage.removeItem('token')
            this.setState({ loggedin: false })
        });
    }

    me()
    {
        const token = window.localStorage.getItem('token')

        console.log(this.props)

        this.props.getMe({
            variables:{ token }
        })
        .then((data) => {
            this.setState({ loggedin: true, user: data.data.authorizeUser })
        })
    }

    componentDidMount()
    {
        if (this.state.loggedin)
        {
            this.me()
        }
    }

    render()
    {
        return (
            <div className="App">
                <br/>
                { !this.state.loggedin &&
                    <FacebookLogin
                        appId="298798940239793"
                        autoLoad={false}
                        fields="name,email,picture"
                        callback={ this.login.bind(this) } />
                }
                { this.state.loggedin &&

                        <Button color="primary" onClick={ this.logout.bind(this) }>Logout</Button>
                }
                { this.state.loggedin && this.state.user &&
                    <div>
                        <img src={`http://graph.facebook.com/${this.state.user.facebookId}/picture?type=large`} alt="profile pic"/>
                        <div>{this.state.user.name}</div>
                        <div>{this.state.user.email}</div>
                        <div>{this.state.user.gender}</div>
                        <div>{this.state.user.birthday}</div>
                        <div>{this.state.user.role}</div>

                    </div>
                }
            </div>
        )
    }
}

const login = gql`
    mutation authorizeUser($accessToken: String!)
    {
        authorizeUser(accessToken: $accessToken)
        {
            _id
            name
            email
            gender
            birthday
            picture
            role
            facebookId
            facebookEmail
            token
        }
    }
`

const logout = gql`
    mutation deauthorizeUser($token: String!)
    {
        deauthorizeUser(token: $token)
        {
            success
        }
    }
`

const getMe = gql`
    query
    {
        viewer
        {
            _id
            name
            email
            gender
            birthday
            picture
            role
            facebookId
            facebookEmail
            token
        }
    }
`

export default compose(
  graphql(login, {name : 'authorizeUser'}),
  graphql(logout, {name : 'deauthorizeUser'}),
  graphql(getMe, {name : 'getMe'}),
)(App);

你可以忽略这段代码的质量差，我只是在玩弄

4

3 回答 3

3

终于在这里找到了解决方案

要点是

import { withApollo } from 'react-apollo'

class LoginForm extends Component {
// query by client.query
const queryUserResult = await this.props.client.query({
    query: QUERY_USER,
    variables: { name: value });
}

const MUTATION = gql`
mutation {
// some mutation logic
}
`

const QUERY = gql`
query {
// some query logic
}
`

export default compose(
    withApollo,
    graphql(MUTATION , { name: 'mutation' })
)(LoginForm))
于 2018-06-01T08:13:08.433 回答
1

我看到您的主要问题是查询的语法。下面我给出了一些使用你使用过的gql不同查询的例子。graphql-tag使用这些点点滴滴可能会有所帮助

示例 1：

const SIGNUP_MUTATION = gql`
mutation SignupMutation($email: String!, $password: String!, $name: String!) {
    signup(email: $email, password: $password, name: $name) {
        token
    }
}`

signup是后端解析器函数的名称

示例 2：

const FEED_QUERY = gql`
  query FeedQuery($first: Int, $skip: Int, $orderBy: LinkOrderByInput) {
    feed(first: $first, skip: $skip, orderBy: $orderBy) {
      links {
       id
       createdAt
       url
       description
       postedBy {
       id
       name
      }
      votes {
       id
       user {
        id
      }
    }
  }
  count
  }
 }`

同样，这里的 feed 是后端解析器函数的名称。

@compose(graphql(queryname , {name: 'logindata'}), graphql(...,{...}),...)您也可以在 App 类的顶部尝试 。这就是我最近使用的方式。

于 2019-01-23T14:25:57.280 回答
0

我不太记得我做了什么，但自从我被问及我的解决方案后，我想我会发布我所做的更改。

// call it like this
this.viewer()

...

const me = gql`
    query user
    {
        viewer
        {
            _id
            name
            email
            gender
            birthday
            picture
            role
            facebookId
            facebookEmail
            token
        }
    }
`

export default compose(
  graphql(login, {name : 'authorizeUser'}),
  graphql(logout, {name : 'deauthorizeUser'}),
  graphql(me),
)(App);
于 2018-03-29T11:03:13.137 回答