From 71d899f1289f79edf5f42a63cab4bedd7c38cb74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20=C3=91=C3=A1=C3=B1ez=20Ortiz?= Date: Fri, 22 May 2020 11:56:34 -0500 Subject: [PATCH] Add urql to the examples list (#13006) * 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 * Update examples/with-urql/pages/index.js Co-authored-by: Joe Haddad * Update examples/with-urql/pages/pokemon/[name].js Co-authored-by: Joe Haddad * Fix linting Co-authored-by: Tim Neutkens Co-authored-by: Joe Haddad Co-authored-by: Joe Haddad --- examples/with-urql/README.md | 42 ++++++++++++++++++++++ examples/with-urql/graphql/client.js | 5 +++ examples/with-urql/graphql/getPokemon.js | 17 +++++++++ examples/with-urql/graphql/getPokemons.js | 20 +++++++++++ examples/with-urql/package.json | 17 +++++++++ examples/with-urql/pages/index.js | 28 +++++++++++++++ examples/with-urql/pages/pokemon/[name].js | 33 +++++++++++++++++ 7 files changed, 162 insertions(+) create mode 100644 examples/with-urql/README.md create mode 100644 examples/with-urql/graphql/client.js create mode 100644 examples/with-urql/graphql/getPokemon.js create mode 100644 examples/with-urql/graphql/getPokemons.js create mode 100644 examples/with-urql/package.json create mode 100644 examples/with-urql/pages/index.js create mode 100644 examples/with-urql/pages/pokemon/[name].js diff --git a/examples/with-urql/README.md b/examples/with-urql/README.md new file mode 100644 index 0000000000..64720f5590 --- /dev/null +++ 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 new file mode 100644 index 0000000000..f8588708db --- /dev/null +++ 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 new file mode 100644 index 0000000000..6bdb8a88f1 --- /dev/null +++ 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 new file mode 100644 index 0000000000..48f0484ade --- /dev/null +++ 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 new file mode 100644 index 0000000000..8a3b237d4d --- /dev/null +++ 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 new file mode 100644 index 0000000000..eb2656b3c7 --- /dev/null +++ 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 ( + + ) +} + +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 new file mode 100644 index 0000000000..029e470391 --- /dev/null +++ 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 ( +
+

{pokemon.name}

+ +
+ ) +} + +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, + }, + } +} -- GitLab