将参数从 React-router 传递到 Apollo Client 2.1 中的查询组件

Question

如何在路由中将 match.params 传递给新的 Apollo 查询组件？我正在尝试构建 Apollo 2.1 之前的 React 组件并使用新的查询组件来学习如何使用它们。

我之前的代码：

const Post = ({ data: { loading, error, post } }) => {
  if (error) return <h1>Error fetching the post!</h1>
  if (!loading) {
    return (
      <article>
        <h1>{post.title}</h1>
        <div className='Post-placeholder'>
          <img
            alt={post.title}
            src={`https://media.graphcms.com/resize=w:650,h:366,fit:crop/${post.coverImage.handle}`}
          />
        </div>
        <Markdown
          source={post.content}
          escapeHtml={false}
        />
      </article>
    )
  }
  return <h2>Loading post...</h2>
}

export const singlePost = gql`
  query singlePost($slug: String!) {
    post: Post(slug: $slug) {
      id slug title
      coverImage { handle }
      content dateAndTime
    } }`

export default graphql(singlePost, {
  options: ({ match }) => ({
    variables: {
      slug: match.params.slug
    }
  })
})(Post)

这是新代码：

const Post = (slug) => (
  <Query query={singlePost} variables={{slug: slug.match.params.slug}}>
    {({ loading, error, post }) => { 
      if (loading || !post) return <h2>Loading post...</h2>
      if (error) return <h1>Error fetching the post!</h1>
      return (
        <article>
        <h1>{post.title}</h1>
        <div className='Post-placeholder'>
          <img
            alt={post.title}
            src={`https://media.graphcms.com/resize=w:650,h:366,fit:crop/${post.coverImage.handle}`}
          />
        </div>
        <Markdown
          source={post.content}
          escapeHtml={false}
        />
      </article>
      )
    }}
  </Query>
)

export const singlePost = gql`
      query singlePost($slug: String!) {
        post: Post(slug: $slug) {
          id slug title
          coverImage { handle }
          content dateAndTime
        } }`

export default Post;

我 console.log post 得到一个空对象，我 console.log slug.match.params.slug 我得到 React-router 传递的 post 的 slug .控制台中也没有错误，我先是加载屏幕，然后是黑页。 Apollo Dev 工具还显示缓存中查询的数据。

Answer 1

我认为渲染回调中应该是data，而不是post。

  <Query query={singlePost} variables={{slug: slug.match.params.slug}}>
    {({ loading, error, data /* <=== This one */ }) => {
      console.log(data.post); // I think your post will be in data.post

将参数从 React-router 传递到 Apollo Client 2.1 中的查询组件

Passing params from React-router to query component in Apollo Client 2.1

javascript

graphql

react-apollo

react-router-v4

apollo-client