通过React Component将变量传递给Gatsby graphql

Question

我将id属性传递给组件。该子组件具有StaticQuery，需要此ID才能运行。 我收到以下错误：

必需类型为“ Int！”的变量“ $ id”没有提供。

我想知道将prop传递给graphql查询的正确方法。

主要组件调用：

<Card id={card.wordpress_id}/>

子组件

import React, {Component} from 'react';
import {graphql, StaticQuery} from "gatsby";

const Query = ({ id }) => (
    <StaticQuery
        query={graphql`
            query($id: Int!) {
                allWordpressWpResources(filter: {wordpress_id: {eq: $id}}) {
                edges {
                  node {
                    id
                    title
                    slug
                  }
                }
              }
            }
        `}
        render={data => (
            <Card data={data}/>
        )}
    />
)

class Card extends Component {
    render() {
        console.log(this.props.data)
        return (
            <div>

            </div>
        );
    }
}

export default Card;