Query Gatsby Image Data from contentful from the client

251 views Asked by At

spent some hours combing the web for an answer and beginning to sense this is not possible.

I am using the new gatsby-plugin-image with a V3 gatsby site with no issues using getImageData() in my build time queries (via import {graphql} from 'gatsby')

I now have a client side query that I am running with Apollo (gatsby-plugin-apollo), but all I can get is the url for a given contentful asset, along with some other info that is not of much use (see first link below for reference). I need to run this query client side because it depends on local storage.

Does any one know of a way to get image data for use with the component from the Contentful Delivery API when querying from the client? With only the url, my images look really off and I'd have to do a bunch more coding to account for the different image sources as this is a reusable component.

It seems my list of plugins, namely gatsby-source-contentful have no bearing when using Apollo client and so the data is not transformed in any way that makes it usable for gatsby-plugin-image

Some links for reference:

Contentful GraphQL Content api docs re Assets

My client side query where provider.logo is the image I want to use with :

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 })
            }
          }
        }
      }
    }
  }
`
0

There are 0 answers