使用react-apollo查询和突变组件将变量传递到graphql查询/突变时出错

时间:2019-06-13 06:37:39

标签: reactjs graphql react-apollo

我正在尝试使用'react-apollo'突变/查询组件在我的react应用程序中实现GraphQL突变/查询。查询本身和在服务器端都可以正常工作,但是通过'react-apollo'突变/查询发送变量时,我收到 POST http://localhost:4000/graphql 400(错误请求)。< / p>

这是服务器端我的架构的代码:

import { gql } from 'apollo-server-express';

export default gql`

    type Edge {
        node: [BusinessDevelopment!] 
    }

    type PageInfo {
        endCursor: String
        hasNextPage: Boolean!
    }

    type BusinessDevelopmentResultCursor {
        edges: Edge!
        pageInfo: PageInfo!
    }

    type BusinessDevelopment {
        id: ID!
        firstName: String!
        lastName: String!
        phone: String!
        email: String
        state: State!
        active: Boolean!
        admin: Boolean!
        regionAdmin: Boolean!
        createdBy: User
        createdOn: Date!
        lastModifiedOn: Date!
        department: String!
    }

    extend type Query {
        allBusinessDevelopment(
            cursor: String
            limit: Int
            byMe: Boolean
        ): BusinessDevelopmentResultCursor
    }
`

这是我在客户端查询的代码:

import gql from 'graphql-tag'
import * as fragments from './../fragments'

export default gql`
    query (
        $cursor: String!,
        $limit: Int!,
        $byMe: Boolean!
    ) {
        allBusinessDevelopment(
            cursor: $cursor,
            limit: $limit,
            byMe: $byMe
        ) {
            edges {
                node {
                    ...Emlpoyee
                }
            },
            pageInfo {
                endCursor,
                hasNextPage
            }
        }
    }
    ${fragments.employee}
`

这是我使用“ react-apollo”查询组件进行的查询:

import React from 'react'
import { Query } from 'react-apollo';

import { getPersonaleAllQuery } from '../../../../../graphql/remoteQueries'

const PersonaleAll = (me) => {
    // ONLY BY admin
    const currentUser = me.me;

    if (currentUser.admin) {
        return (
            <>
                <Query
                    query={getPersonaleAllQuery}
                    variables={{
                        cursor: 'null',
                        limit: 10,
                        byMe: false
                    }}
                >
                    {({loading, error, data}) => {
                        if (loading) return <div>Loading...</div>
                        if (error) return <div>Error</div>
                        if (data) {
                            console.log(data);
                        }
                    }}
                </Query>
            </>
        );
    }
    return <h3>Not authorise .!..</h3>
}

export default PersonaleAll;

0 个答案:

没有答案