71d899f128
* Install UrQL dependencies - Created the examples folder `with-urql` - Installed the dependencies - Got a simple index.js page setup * Basic UrQL example - Connects to Pokemon GraphQL API * Loading Pokemon list + Pokemon page - Using `isomorphic-unfetch` because `urql` uses `window.fetch` to get data because we need to query the GraphQL API using Node (in `getStaticProps`) - Deleted `_app.js` since we're not using UrQL to query data on the clientside - Put all GraphQL related code in `/graphql` * Update README for UrQL example * Update urql casing * Update examples/with-urql/graphql/client.js Co-authored-by: Joe Haddad <timer150@gmail.com> * Update examples/with-urql/pages/index.js Co-authored-by: Joe Haddad <timer150@gmail.com> * Update examples/with-urql/pages/pokemon/[name].js Co-authored-by: Joe Haddad <timer150@gmail.com> * Fix linting Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: Joe Haddad <timer150@gmail.com> Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
28 lines
667 B
JavaScript
28 lines
667 B
JavaScript
import Link from 'next/link'
|
|
import { getPokemons } from '../graphql/getPokemons'
|
|
|
|
export default function Home({ pokemons }) {
|
|
return (
|
|
<ul>
|
|
{pokemons.map((pokemon) => (
|
|
<li key={pokemon.name}>
|
|
<Link as={`/pokemon/${pokemon.name}`} href="/pokemon/[name]">
|
|
<a>
|
|
<h2 style={{ textTransform: 'capitalize' }}>{pokemon.name}</h2>
|
|
<img src={pokemon.image} alt={`${pokemon.name} picture`} />
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export const getStaticProps = async () => {
|
|
const pokemons = await getPokemons()
|
|
return {
|
|
props: {
|
|
pokemons,
|
|
},
|
|
}
|
|
}
|