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

Question

我正在玩 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, Marker, 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;

Answer 1

使用：

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


const Map = (props) => {
  const data = useStaticQuery(graphql`
{
    allContentfulLocations {
      nodes {
        id
        name
        location {
          lat
          lon
        }
      }
    }
  }
`)
      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}) => {
                console.log(location);
                return (
            <Marker
                onMouseOver={() => {
                    setInfoWindow(true)
                }}
                onClick={() => props.setmodal(true)}
                position={{
                    lat: 34.0522,
                    lng: 118.2437
                }}
                />
                )
              })}

        </GoogleMap>
    )
}

export default Map;

如果您的组件 (Map) 不是页面，您将无法使用页面查询，因此您将被迫使用 static query

注意 map 循环中的解构：

locations.map(({location}) =>

在您使用循环的方式中，location 是可迭代变量，而不是 location 对象本身。您应该在您的方法中访问 location.location ，您正在避免重复，在我提供的可迭代对象的相同声明中使用解构。我还添加了一个 console.log() 用于调试目的，看看这两种方法中的内容。

此外，如果您查看您的代码：

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

您正在将 props 解构为 props 本身。我已经删除了解构并将其添加到：

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

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

Can I query GraphQL inside Google Map component?

reactjs

contentful

graphql

gatsby