将变量解析为 GraphQL 查询时出现错误 400答案

【问题标题】：Error 400 when parsing variable to GraphQL query将变量解析为 GraphQL 查询时出现错误 400
【发布时间】：2019-01-02 05:10:20
【问题描述】：

我有一个基本的 react 组件，它应该通过 react-apollo 从我的 graphql db 呈现一些动态数据。我尝试将内容 ID 传递给我的查询，如下所示：

export default withApollo(graphql(
    gql`
            query ($postId: String!){
                blogPost (where: { id: $postId }){
                    title
                }
            }
    `,
    {
        options: {
            variables: {
                postId: "cjju54kgfl4r6095353zn6us1"

            },
            props: ({data}) => ({data})
        }
    })(Post))

这个例子在服务器上给我一个 400 错误

但是，它的工作原理是这样的：

export default withApollo(graphql(
    gql`
        query {
            blogPost (where: { id: "cjju54kgfl4r6095353zn6us1" }){
                title
            }
        }
    `,
    {
        options: {
            props: ({data}) => ({data})
        }
    })(Post))

我浏览了整个 Apollo 文档，但无法弄清楚我在这里做错了什么。

如果有帮助，这里是整个组件：

import PageLayout from '../layouts/main'
import ContentWrapper from '../layouts/contentWrapper'
import Header from '../components/Header'
import {graphql} from 'react-apollo'
import gql from "graphql-tag";
import withApollo from "../lib/withApollo";
import ErrorMessage from '../components/ErrorMessage'

const headerContent = {
    headline: 'Test',
    subHeadline: 'Test'
}

function Post({data: {variables, loading, error, blogPost}}) {
    if (loading) {
        return <div>Loading</div>
    }
    else if (error) {
        return <ErrorMessage message='Error loading posts.'/>
    }
    else {
        return (
            <PageLayout>
                <Header data={headerContent}/>
                <ContentWrapper>
                    <h1>{blogPost.title}</h1>
                    <p>{JSON.stringify(variables)}</p>
                </ContentWrapper>
            </PageLayout>
        )
    }
}

export default withApollo(graphql(
    gql`
            query ($postId: String!){
                blogPost (where: { id: $postId }){
                    title
                }
            }
    `,
    {
        options: {
            variables: {
                postId: "cjju54kgfl4r6095353zn6us1"

            },
            props: ({data}) => ({data})
        }
    })(Post))

我真的很困惑，感谢您的帮助！

记录data.error 抛出：

Error: Network error: Response not successful: Received status code 400
    at new ApolloError (ApolloError.js:34)
    at ObservableQuery.webpackJsonp../node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.currentResult (ObservableQuery.js:87)
    at Query._this.getQueryResult (Query.js:104)
    at Query.webpackJsonp../node_modules/react-apollo/Query.js.Query.render (Query.js:206)
    at finishClassComponent (react-dom.development.js:13193)
    at updateClassComponent (react-dom.development.js:13155)
    at beginWork (react-dom.development.js:13824)
    at performUnitOfWork (react-dom.development.js:15863)
    at workLoop (react-dom.development.js:15902)
    at renderRoot (react-dom.development.js:15942)

【问题讨论】：

我删除了我之前的答案，因为它没有用。但我倾向于认为这是后端的问题，处理请求中发送的变量对象。可以分享发送到服务器的 POST 请求正文吗？

标签： graphql react-apollo

【解决方案1】：

我刚刚想通了：

$postId: String!必须是$postId: ID

感谢您的帮助，我似乎把这个基本的 GraphQL 概念弄错了。

【讨论】：