从客户端的 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 })
            }
          }
        }
      }
    }
  }
`

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)