前提
Pokeapiで用意されているポケモン151匹の名前と番号、画像を
取得して表示させたい。
実現したいこと
・ポケモンの名前と番号、画像を表示させたい。
発生している問題・エラーメッセージ
エラーメッセージ出ていませんが、画像が表示されない状態です。
該当のソースコード
next.js
1import "../styles/globals.css"; 2import type { AppProps } from "next/app"; 3import { searchPokemon } from "./graphql/queries"; 4import { ApolloProvider, useQuery } from "@apollo/client"; 5import { client } from "./graphql/cilent"; 6 7function PokemonField() { 8 const { loading, error, data } = useQuery(searchPokemon); 9 10 if (loading) return <p>Loading...</p>; 11 if (error || !data) return <p>Error</p>; 12 return ( 13 <div> 14 <div>No: {data.pokemons.number}</div> 15 <div>Name: {data.pokemons.name}</div> 16 <img src={data.pokemons.image} alt={data.pokemons.name} /> 17 </div> 18 ); 19} 20 21function MyApp({ Component, pageProps }: AppProps) { 22 return ( 23 <ApolloProvider client={client}> 24 <PokemonField /> 25 </ApolloProvider> 26 ); 27} 28 29export default MyApp; 30
queries.tsx
1import gql from "graphql-tag"; 2 3export const searchPokemon = gql` 4 query searchPokemon { 5 pokemons(first: 151) { 6 number 7 name 8 image 9 } 10 } 11`; 12
client.tsx
1 2import { ApolloClient, InMemoryCache } from "@apollo/client"; 3 4const client = new ApolloClient({ 5 uri: "https://graphql-pokemon2.vercel.app/", 6 cache: new InMemoryCache(), 7}); 8 9export { client }; 10
試したこと
とりあえず一件だけ表示させたいと思い実行したのですが、うまく表示されません。
よろしくお願いいたします。
あなたの回答
tips
プレビュー