Pokeapiをgraphqlを使ってデータを取得し表示させたい

前提

Pokeapiで用意されているポケモン151匹の名前と番号、画像を
取得して表示させたい。

実現したいこと

・ポケモンの名前と番号、画像を表示させたい。

発生している問題・エラーメッセージ

エラーメッセージ出ていませんが、画像が表示されない状態です。

該当のソースコード

next.js

import "../styles/globals.css"; import type { AppProps } from "next/app"; import { searchPokemon } from "./graphql/queries"; import { ApolloProvider, useQuery } from "@apollo/client"; import { client } from "./graphql/cilent"; function PokemonField() { const { loading, error, data } = useQuery(searchPokemon); if (loading) return <p>Loading...</p>; if (error || !data) return <p>Error</p>; return ( <div> <div>No: {data.pokemons.number}</div> <div>Name: {data.pokemons.name}</div> <img src={data.pokemons.image} alt={data.pokemons.name} /> </div> ); } function MyApp({ Component, pageProps }: AppProps) { return ( <ApolloProvider client={client}> <PokemonField /> </ApolloProvider> ); } export default MyApp;

queries.tsx

import gql from "graphql-tag"; export const searchPokemon = gql` query searchPokemon { pokemons(first: 151) { number name image } } `;

client.tsx

import { ApolloClient, InMemoryCache } from "@apollo/client"; const client = new ApolloClient({ uri: "https://graphql-pokemon2.vercel.app/", cache: new InMemoryCache(), }); export { client };

試したこと

とりあえず一件だけ表示させたいと思い実行したのですが、うまく表示されません。

よろしくお願いいたします。