Skip to content

Commit

Permalink
(examples) - Add readme and increase consistency (#1616)
Browse files Browse the repository at this point in the history
kitten authored May 7, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 367d198 commit 76043cb
Showing 49 changed files with 269 additions and 215 deletions.
14 changes: 14 additions & 0 deletions examples/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
| Example | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
| [`with-react`](./with-react) | Shows a basic query in `urql` with React. |
| [`with-react-native`](./with-react-native) | Shows a basic query in `urql` with React Native. |
| [`with-svelte`](./with-svelte) | Shows a basic query in `@urql/svelte` with Svelte. |
| [`with-vue3`](./with-vue3) | Shows a basic query in `@urql/vue` with Vue 3. |
| [`with-next`](./with-next) | Shows some examples with `next-urql` in Next.js with the default, `getStaticProps` and `getServerSideProps`. |
| [`with-pagination`](./with-pagination) | Shows how to generically set up infinite pagination with `urql` in UI code. |
| [`with-apq`](./with-apq) | Shows Automatic Persisted Queries with `@urql/exchange-persisted-fetch`. |
| [`with-graphcache-updates`](./with-graphcache-updates) | Shows manual cache updates with `@urql/exchange-graphcache`. |
| [`with-graphcache-pagination`](./with-graphcache-pagination) | Shows the automatic infinite pagination helpers from `@urql/exchange-graphcache`. |
| [`with-multipart`](./with-multipart) | Shows file upload support with `@urql/exchange-multipart-fetch`. |
| [`with-refresh-auth`](./with-refresh-auth) | Shows an example of authentication with refresh tokens using `@urql/exchange-auth`. |
| [`with-retry`](./with-retry) | Shows how to set up `@urql/exchange-retry` for retrying failed operations. |
32 changes: 16 additions & 16 deletions examples/with-apq/README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
# Integrating with `@urql/exchange-persisted-fetch`’s persistedFetchExchange
# With Automatic Persisted Queries

Integrating urql is as simple as:
This example shows `urql` in use with `@urql/exchange-persisted-fetch`'s `persistedFetchExchange`
to support [Automatic Persisted
Queries](https://www.apollographql.com/docs/apollo-server/performance/apq/). This largely follows
the ["Persisted Queries" docs
page](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/#automatic-persisted-queries)
and uses the [`trygql.formidable.dev/graphql/apq-weather` schema](https://github.com/FormidableLabs/trygql).

1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
To run this example install dependencies and run the `start` script:

```sh
yarn add urql graphql
yarn install
yarn run start
# or
npm install --save urql graphql
npm install
npm run start
```

2. Then install the package for [automatic persisted queries](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/)
This example contains:


```sh
yarn add @urql/exchange-persisted-fetch
# or
npm install --save @urql/exchange-persisted-fetch
```

3. Setting up the Client and adding persistedFetchExchange [here](src/App.js)

4. Execute the Query [here](src/pages/LocationsList.js)
- The `urql` bindings and a React app with a client set up in [`src/App.js`](src/App.js)
- The `persistedFetchExchange` from `@urql/exchange-persisted-fetch` in [`src/App.js`](src/App.js)
- A query for locations in [`src/pages/LocationsList.js`](src/pages/LocationsList.js)
10 changes: 2 additions & 8 deletions examples/with-apq/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-urql-query",
"version": "1.0.0",
"name": "with-apq",
"version": "0.0.0",
"private": true,
"dependencies": {
"@urql/exchange-persisted-fetch": "^1.3.0",
@@ -18,12 +18,6 @@
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
2 changes: 1 addition & 1 deletion examples/with-apq/src/App.js
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import { persistedFetchExchange } from '@urql/exchange-persisted-fetch';
import LocationsList from "./pages/LocationsList";

const client = createClient({
url: "https://trygql.dev/graphql/apq-weather",
url: "https://trygql.formidable.dev/graphql/apq-weather",
exchanges: [
persistedFetchExchange({
preferGetForPersistedQueries: true,
25 changes: 0 additions & 25 deletions examples/with-cache-updates/README.md

This file was deleted.

30 changes: 15 additions & 15 deletions examples/with-graphcache-pagination/README.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
# Integrating with `@urql/exchange-graphcache`'s cacheExchange pagination
# With Graphcache's Pagination

Integrating urql is as simple as:
This example shows `urql` in use with `@urql/exchange-graphcache`'s infinite pagination helpers to
merge several pages of a Relay-compliant schema into an infinite list.
This largely follows the ["Pagination" section on the "Local Resolvers" docs
page](https://formidable.com/open-source/urql/docs/graphcache/local-resolvers/#pagination)
and uses the [`trygql.formidable.dev/graphql/relay-npm` schema](https://github.com/FormidableLabs/trygql).

1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
To run this example install dependencies and run the `start` script:

```sh
yarn add urql graphql
yarn install
yarn run start
# or
npm install --save urql graphql
npm install
npm run start
```

2. Install [graphcache](https://formidable.com/open-source/urql/docs/graphcache/)
This example contains:

```sh
yarn add @urql/exchange-graphcache
# or
npm install --save @urql/exchange-graphcache
```

3. Setting up the Client [here](src/App.js)

4. Execute the Query [here](src/pages/PaginatedNpmSearch.js)
- The `urql` bindings and a React app with a client set up in [`src/App.js`](src/App.js)
- The `cacheExchange` from `@urql/exchange-graphcache` in [`src/App.js`](src/App.js)
- A paginated query for packages in [`src/pages/PaginatedNpmSearch.js`](src/pages/PaginatedNpmSearch.js)
10 changes: 2 additions & 8 deletions examples/with-graphcache-pagination/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-urql-query",
"version": "1.0.0",
"name": "with-graphcache-pagination",
"version": "0.0.0",
"private": true,
"dependencies": {
"@urql/exchange-graphcache": "^4.0.0",
@@ -18,12 +18,6 @@
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
2 changes: 1 addition & 1 deletion examples/with-graphcache-pagination/src/App.js
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import { relayPagination } from '@urql/exchange-graphcache/extras';
import PaginatedNpmSearch from "./pages/PaginatedNpmSearch";

const client = createClient({
url: "https://trygql.dev/graphql/relay-npm",
url: "https://trygql.formidable.dev/graphql/relay-npm",
exchanges: [
dedupExchange,
cacheExchange({
24 changes: 24 additions & 0 deletions examples/with-graphcache-updates/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# With Graphcache's Pagination

This example shows `urql` in use with `@urql/exchange-graphcache` and demonstrates a manual cache
update, as explained in [the "Cache Updates" docs page](https://formidable.com/open-source/urql/docs/graphcache/cache-updates/).
This example uses the [`trygql.formidable.dev/graphql/web-collections`
schema](https://github.com/FormidableLabs/trygql) and builds on top of the [`with-refresh-auth`
example](../with-refresh-auth) so that we can authenticate with the schema before creating links on
it.

To run this example install dependencies and run the `start` script:

```sh
yarn install
yarn run start
# or
npm install
npm run start
```

This example contains:

- The `urql` bindings and a React app with a client set up in [`src/client/index.js`](src/client/index.js)
- The `cacheExchange` from `@urql/exchange-graphcache` in [`src/client/index.js`](src/client/index.js)
- A links list and link creation in [`src/pages/Links.js`](src/pages/Links.js)
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-urql-query",
"version": "1.0.0",
"name": "with-graphcache-updates",
"version": "0.0.0",
"private": true,
"dependencies": {
"@urql/exchange-auth": "^0.1.2",
@@ -19,12 +19,6 @@
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Provider } from "urql";

import client from './client';
import client from "./client";
import Home from "./pages/Home";

function App() {
Original file line number Diff line number Diff line change
@@ -41,7 +41,7 @@ const cache = cacheExchange({
});

const client = createClient({
url: 'https://trygql.dev/graphql/web-collections',
url: 'https://trygql.formidable.dev/graphql/web-collections',
exchanges: [
dedupExchange,
cache,
File renamed without changes.
File renamed without changes.
28 changes: 14 additions & 14 deletions examples/with-multipart/README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
# Integrating with `@urql/exchange-multipart-fetch`'s multipartFetchExchange
# With Multipart File Upload

Integrating urql is as simple as:
This example shows `urql` in use with `@urql/exchange-multipart-fetch`'s `multipartFetchExchange`
to support file uploads in GraphQL. This largely follows the ["File Uploads" docs
page](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/)
and uses the [`trygql.formidable.dev/graphql/uploads-mock` schema](https://github.com/FormidableLabs/trygql).

1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
To run this example install dependencies and run the `start` script:

```sh
yarn add urql graphql
yarn install
yarn run start
# or
npm install --save urql graphql
npm install
npm run start
```

2. Add [multipart exchange](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/)
This example contains:

```yarn add @urql/exchange-multipart-fetch
# or
npm install --save @urql/exchange-multipart-fetch
```

3. Setting up the Client [here](src/App.js)

4. Execute the Mutation [here](src/pages/FileUpload.js)
- The `urql` bindings and a React app with a client set up in [`src/App.js`](src/App.js)
- The `multipartFetchExchange` from `@urql/exchange-multipart-fetch` in [`src/App.js`](src/App.js)
- A basic file upload form in [`src/pages/FileUpload.js`](src/pages/FileUpload.js)
10 changes: 2 additions & 8 deletions examples/with-multipart/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-urql-query",
"version": "1.0.0",
"name": "with-multipart",
"version": "0.0.0",
"private": true,
"dependencies": {
"@urql/exchange-multipart-fetch": "^0.1.11",
@@ -18,12 +18,6 @@
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
5 changes: 3 additions & 2 deletions examples/with-multipart/src/App.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { createClient, Provider } from "urql";
import { multipartFetchExchange } from '@urql/exchange-multipart-fetch';
import { multipartFetchExchange } from "@urql/exchange-multipart-fetch";

import FileUpload from "./pages/FileUpload";

const client = createClient({
url: "https://trygql.dev/graphql/uploads-mock",
url: "https://trygql.formidable.dev/graphql/uploads-mock",
exchanges: [multipartFetchExchange],
],
});

function App() {
16 changes: 15 additions & 1 deletion examples/with-next/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,18 @@
# Integrating with Next
# With Next.js

This example shows `next-urql` and `urql` in use with Next.js as explained [in the "Next.js" section
on the "Server-side Rendering" docs
page](https://formidable.com/open-source/urql/docs/advanced/server-side-rendering/#nextjs).

To run this example install dependencies and run the `start` script:

```sh
yarn install
yarn run start
# or
npm install
npm run start
```

## getInitialProps

4 changes: 2 additions & 2 deletions examples/with-next/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "next-get-static-props",
"version": "1.0.0",
"name": "with-next",
"version": "0.0.0",
"private": true,
"dependencies": {
"graphql": "^15.5.0",
2 changes: 1 addition & 1 deletion examples/with-next/pages/_app.js
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ const App = ({ Component, pageProps }) => <Component {...pageProps} />;

export default withUrqlClient(
() => ({
url: "https://trygql.dev/graphql/basic-pokedex"
url: "https://trygql.formidable.dev/graphql/basic-pokedex"
}),
{ ssr: false }
)(App);
2 changes: 1 addition & 1 deletion examples/with-next/pages/index.js
Original file line number Diff line number Diff line change
@@ -30,7 +30,7 @@ function Index() {

export default withUrqlClient(
() => ({
url: "https://trygql.dev/graphql/basic-pokedex"
url: "https://trygql.formidable.dev/graphql/basic-pokedex"
}),
{ ssr: true }
)(Index);
2 changes: 1 addition & 1 deletion examples/with-next/pages/server.js
Original file line number Diff line number Diff line change
@@ -35,7 +35,7 @@ function Server() {
export async function getServerSideProps() {
const ssrCache = ssrExchange({ isClient: false });
const client = initUrqlClient({
url: "https://trygql.dev/graphql/basic-pokedex",
url: "https://trygql.formidable.dev/graphql/basic-pokedex",
exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange]
}, false);

2 changes: 1 addition & 1 deletion examples/with-next/pages/static.js
Original file line number Diff line number Diff line change
@@ -35,7 +35,7 @@ function Static() {
export async function getStaticProps() {
const ssrCache = ssrExchange({ isClient: false });
const client = initUrqlClient({
url: "https://trygql.dev/graphql/basic-pokedex",
url: "https://trygql.formidable.dev/graphql/basic-pokedex",
exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange]
}, false);

Loading

0 comments on commit 76043cb

Please sign in to comment.