Question

我正在尝试使用以下查询编写react组件，但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);

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

Answer 1

最后找到解决方案here

要点是

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))

Answer 2

我看到您的主要问题是查询的语法。下面，我给出一些使用来自gql的{{1}}的不同查询的示例。使用这些点点滴滴可能会有所帮助

示例1：

graphql-tag

const SIGNUP_MUTATION = gql` mutation SignupMutation($email: String!, $password: String!, $name: String!) { signup(email: $email, password: $password, name: $name) { token } }`是后端中的解析器功能的名称

示例2：

signup

类似地，这里的feed是后端的解析器函数的名称。

您也可以尝试 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 } }`位于您的App类的顶部。这就是我最近使用过的方式。

Answer 3

我不记得自己做了什么，但是当我被问及我的解决方案时，我想我会发布我所做的改变。

private static OkHttpClient getUnsafeOkHttpClient() {
        try {
            // Create a trust manager that does not validate certificate chains
            final TrustManager[] trustAllCerts = new TrustManager[]{
                    new X509TrustManager() {
                        @Override
                        public void checkClientTrusted(java.security.cert.X509Certificate[] chain,
                                                       String authType) throws CertificateException {
                        }

                        @Override
                        public void checkServerTrusted(java.security.cert.X509Certificate[] chain,
                                                       String authType) throws CertificateException {
                        }

                        @Override
                        public java.security.cert.X509Certificate[] getAcceptedIssuers() {
                            return new X509Certificate[0];
                        }
                    }
            };

            // Install the all-trusting trust manager
            final SSLContext sslContext = SSLContext.getInstance("SSL");
            sslContext.init(null, trustAllCerts, new java.security.SecureRandom());
            // Create an ssl socket factory with our all-trusting manager
            final SSLSocketFactory sslSocketFactory = sslContext.getSocketFactory();

            return new OkHttpClient.Builder()
                    .sslSocketFactory(sslSocketFactory, (X509TrustManager) trustAllCerts[0])
                    .hostnameVerifier(new HostnameVerifier() {
                        @Override
                        public boolean verify(String hostname, SSLSession session) {
                            return true;
                        }
                    })
                    .connectTimeout(30, TimeUnit.SECONDS)
                    .writeTimeout(30, TimeUnit.SECONDS)
                    .retryOnConnectionFailure(true)
                    .readTimeout(30, TimeUnit.SECONDS).addInterceptor(new Interceptor() {
                        @Override
                        public okhttp3.Response intercept(Chain chain) throws IOException {
                            Request original = chain.request();

                            Request request = original.newBuilder()
                                    .build();
                            return chain.proceed(request);
                        }
                    }).build();


        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }

Apollo-react撰写查询不是一个函数

3 个答案: