从客户端的 contentful 中查询 Gatsby Image Data

如何解决从客户端的 contentful 中查询 Gatsby Image Data

花了几个小时在网上寻找答案，并开始意识到这是不可能的。

我将新的 gatsby-plugin-image 与 V3 gatsby 站点一起使用，在我的构建时查询中使用 getimageData() 没有问题（通过 import {graphql} from 'gatsby'）

我现在有一个客户端查询，我正在使用 Apollo (gatsby-plugin-apollo) 运行它，但我能得到的只是给定内容资产的 url，以及一些其他信息这没什么用（请参阅下面的第一个链接以供参考）。我需要运行这个查询客户端，因为它依赖于本地存储。

从客户端查询时，有谁知道从 Contentful Delivery API 获取用于组件的图像数据的方法吗？仅使用 url，我的图像看起来真的很糟糕，我必须做更多的编码来解释不同的图像源，因为这是一个可重复使用的组件。

似乎我的插件列表，即 gatsby-source-contentful 在使用 Apollo 客户端时没有任何意义，因此数据不会以任何方式进行转换，使其可用于 gatsby-plugin-image

一些参考链接：

Contentful GraphQL Content api docs re Assets

我的客户端查询，其中 provider.logo 是我要使用的图像：

import { gql,useLazyQuery } from '@apollo/client'

const GET_SAVED_RESOURCES = gql`
  query($bookmarks: [String],$locale: String!) {
    resourcePageCollection(
      locale: $locale,where: {
        sys: {
          id_in: $bookmarks
        }
      }
    ) {
      items {
        sys { id }
        title
        slug
        tags
        provider {
          ... on Provider {
            name
            logo {
              title
              url(transform: { height: 60 })
            }
          }
        }
      }
    }
  }
`