我可以在 Google Map 组件中查询 GraphQL 吗？

如何解决我可以在 Google Map 组件中查询 GraphQL 吗？

我在玩 Gatsby/Contentful 和 Google 地图。

我已经创建了这个组件：

import React from 'react'
import { GoogleMap,Marker,InfoWindow } from 'react-google-maps'

const Map = (props) => {

    return (

        <GoogleMap
            defaultZoom={12}
            defaultCenter={{
                lat: 34.0522,lng: 118.2437
            }}
            >

            <Marker
                onMouseOver={() => {
                    setInfoWindow(true)
                }}
                onClick={() => props.setmodal(true)}
                position={{
                    lat: 34.0522,lng: 118.2437
                }}
            />

        </GoogleMap>
    )
}

export default Map;

地图正在显示，一切正常。我尝试使用这种方法访问我的 Contentful 数据，但收到一个错误，提示 allContentfulLocations 未定义。如何在 Google 地图中查询我的 Contentful 数据？

这是我失败的方法。

import React from 'react'
import { GoogleMap,InfoWindow } from 'react-google-maps'
import { graphql } from "gatsby"

export const query = graphql`
{
    allContentfulLocations {
      nodes {
        id
        name
        location {
          lat
          lon
        }
      }
    }
  }
`

const Map = ({props,data}) => {

      const {
              allContentfulLocations: { nodes: locations },} = data

    const [infoWindow,setInfoWindow] = useState(false)

    return (

        <GoogleMap
            defaultZoom={12}
            defaultCenter={{
                lat: location.location.lat
                lng: location.location.lon
            }}
            >

            {locations.map(location => {
                return (
            <Marker
                onMouseOver={() => {
                    setInfoWindow(true)
                }}
                onClick={() => props.setmodal(true)}
                position={{
                    lat: 34.0522,lng: 118.2437
                }}
                />
                )
              })}

        </GoogleMap>
    )
}

export default Map;