"use client"
import { gql, useSuspenseQuery } from "@apollo/client"
import { query } from "../ApolloClient"

interface breedprop{
    breed:string 
}

const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
   dog(breed: $breed) {
      id
      displayImage
    }
  }
`;

export default function ShipPhoto({breed}:breedprop){
    console.log(breed)
    const { data, error} = useSuspenseQuery(GET_DOG_PHOTO, {
        variables: { breed },
      });
    return(
        <div>
            {breed}
        </div>
    )
}

Here the value of breed is airedale.
When I query the api in postman using
following query it is working perfectly.

{
    dog(breed:"airedale"){
        displayImage
    }
}

But in my code I guess I’m not able to pass variable.
What should I do? Please help