Add urql to the examples list (vercel#13006)

alejandronanez · timneutkens · Timer · web-flow · commit 71d899f1289f · 2020-05-22T18:56:34.000+02:00
* 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 &lt;timer150@gmail.com&gt;

* Update examples/with-urql/pages/index.js

Co-authored-by: Joe Haddad &lt;timer150@gmail.com&gt;

* Update examples/with-urql/pages/pokemon/[name].js

Co-authored-by: Joe Haddad &lt;timer150@gmail.com&gt;

* Fix linting

Co-authored-by: Tim Neutkens &lt;tim@timneutkens.nl&gt;
Co-authored-by: Joe Haddad &lt;timer150@gmail.com&gt;
Co-authored-by: Joe Haddad &lt;joe.haddad@zeit.co&gt;
diff --git a/examples/with-urql/README.md b/examples/with-urql/README.md
@@ -0,0 +1,42 @@
+# Next.js and urql
+
+Use [urql](https://github.com/FormidableLabs/urql) with Next.js using SSG.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com/now):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-urql)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npm init next-app --example with-urql with-urql-app
+# or
+yarn create next-app --example with-urql with-urql-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-urql
+cd with-urql
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-urql/graphql/client.js b/examples/with-urql/graphql/client.js
@@ -0,0 +1,5 @@
+import { createClient } from 'urql'
+
+export const client = createClient({
+  url: 'https://graphql-pokemon.now.sh/',
+})
diff --git a/examples/with-urql/graphql/getPokemon.js b/examples/with-urql/graphql/getPokemon.js
@@ -0,0 +1,17 @@
+import { client } from './client'
+const pokemonQuery = `
+  query firstTwentyPokemons($name: String!) {
+    pokemon(name: $name) {
+      name
+      image
+    }
+  }
+`
+
+export const getPokemon = async (name) => {
+  const {
+    data: { pokemon },
+  } = await client.query(pokemonQuery, { name }).toPromise()
+
+  return pokemon
+}
diff --git a/examples/with-urql/graphql/getPokemons.js b/examples/with-urql/graphql/getPokemons.js
@@ -0,0 +1,20 @@
+import { client } from './client'
+const firstTwentyPokemonsQuery = `
+  query firstTwentyPokemons {
+    pokemons(first: 20) {
+      image
+      name
+    }
+  }
+`
+
+export const getPokemons = async () => {
+  const {
+    data: { pokemons },
+  } = await client.query(firstTwentyPokemonsQuery).toPromise()
+
+  return pokemons.map((pokemon) => ({
+    ...pokemon,
+    name: pokemon.name.toLowerCase(),
+  }))
+}
diff --git a/examples/with-urql/package.json b/examples/with-urql/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "with-urql",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "graphql": "^15.0.0",
+    "isomorphic-unfetch": "^3.0.0",
+    "next": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "urql": "^1.9.7"
+  },
+  "license": "MIT"
+}
diff --git a/examples/with-urql/pages/index.js b/examples/with-urql/pages/index.js
@@ -0,0 +1,28 @@
+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,
+    },
+  }
+}
diff --git a/examples/with-urql/pages/pokemon/[name].js b/examples/with-urql/pages/pokemon/[name].js
@@ -0,0 +1,33 @@
+import { getPokemon } from '../../graphql/getPokemon'
+import { getPokemons } from '../../graphql/getPokemons'
+
+export default function Pokemon({ pokemon }) {
+  return (
+    <div>
+      <h1>{pokemon.name}</h1>
+      <img src={pokemon.image} />
+    </div>
+  )
+}
+
+export const getStaticPaths = async () => {
+  const pokemons = await getPokemons()
+
+  return {
+    paths: pokemons.map(({ name }) => ({
+      params: { name },
+    })),
+    fallback: true,
+  }
+}
+
+export const getStaticProps = async (context) => {
+  const { name } = context.params
+  const pokemon = await getPokemon(name)
+
+  return {
+    props: {
+      pokemon,
+    },
+  }
+}
