rsnext/examples/with-urql
Alejandro Ñáñez Ortiz 71d899f128
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 <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>
2020-05-22 18:56:34 +02:00
..
graphql Add urql to the examples list (#13006) 2020-05-22 18:56:34 +02:00
pages Add urql to the examples list (#13006) 2020-05-22 18:56:34 +02:00
package.json Add urql to the examples list (#13006) 2020-05-22 18:56:34 +02:00
README.md Add urql to the examples list (#13006) 2020-05-22 18:56:34 +02:00

Next.js and urql

Use urql with Next.js using SSG.

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

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:

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:

npm install
npm run dev
# or
yarn
yarn dev

Deploy it to the cloud with Vercel (Documentation).