Question

我有一个基本的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)

Answer 1

我刚发现：

$postId: String!不必为$postId: ID

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

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

1 个答案: