使用apollo / react-hooks运行查询时获得400响应错误代码

Question

我的依赖项是：

"@apollo/react-hooks": "^3.1.1",
"apollo-boost": "^0.4.4",
"graphql": "^14.5.6",
"react": "^16.9.0",

我调用React组件的查询是：

import React from 'react'
import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

const FEED_QUERY = gql`
  {
    session(session_id: $id) {
      session_id
      event_type
    }
  }
`

function SessionDetails() {
  const id = "web123";
  const { loading, error, data } = useQuery(FEED_QUERY, {
    variables: { id },
  });
  console.log(error)
  console.log(data)

  if (loading) return <div>Fetching</div>
  if (error) return <div>Error</div>

  const sessionsToRender = data.session

  return (
    <div>
      {sessionsToRender.map(session => <Session key={session.session_id} session={session} />)}
    </div>
  )
}

我得到error为"Network error: Response not successful: Received status code 400"，我的数据为undefined。该查询在GraphQL游乐场中正常运行，但在应用程序中无法正常运行。似乎没有替换ID。我该如何解决？