Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

(examples) Usage of persistedFetchExchange (#1582)

* (examples) Usage of persistedFetchExchange

authored by

Yanko Valera and committed by
GitHub
5e6eeb4d 0b236f7f

+149 -2
+24
examples/with-apq/README.md
··· 1 + # Integrating with `@urql/exchange-persisted-fetch`’s persistedFetchExchange 2 + 3 + Integrating urql is as simple as: 4 + 5 + 1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/) 6 + 7 + ```sh 8 + yarn add urql graphql 9 + # or 10 + npm install --save urql graphql 11 + ``` 12 + 13 + 2. Then install the package for [automatic persisted queries](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/) 14 + 15 + 16 + ```sh 17 + yarn add @urql/exchange-persisted-fetch 18 + # or 19 + npm install --save @urql/exchange-persisted-fetch 20 + ``` 21 + 22 + 3. Setting up the Client and adding persistedFetchExchange [here](src/App.js) 23 + 24 + 4. Execute the Query [here](src/pages/LocationsList.js)
+39
examples/with-apq/package.json
··· 1 + { 2 + "name": "react-urql-query", 3 + "version": "1.0.0", 4 + "private": true, 5 + "dependencies": { 6 + "@urql/exchange-persisted-fetch": "^1.3.0", 7 + "graphql": "^15.5.0", 8 + "react": "^17.0.2", 9 + "react-dom": "^17.0.2", 10 + "urql": "^2.0.2" 11 + }, 12 + "devDependencies": { 13 + "react-scripts": "4.0.3" 14 + }, 15 + "scripts": { 16 + "start": "react-scripts start", 17 + "build": "react-scripts build", 18 + "test": "react-scripts test", 19 + "eject": "react-scripts eject" 20 + }, 21 + "eslintConfig": { 22 + "extends": [ 23 + "react-app", 24 + "react-app/jest" 25 + ] 26 + }, 27 + "browserslist": { 28 + "production": [ 29 + ">0.2%", 30 + "not dead", 31 + "not op_mini all" 32 + ], 33 + "development": [ 34 + "last 1 chrome version", 35 + "last 1 firefox version", 36 + "last 1 safari version" 37 + ] 38 + } 39 + }
+24
examples/with-apq/src/App.js
··· 1 + import { createClient, Provider, fetchExchange } from 'urql'; 2 + import { persistedFetchExchange } from '@urql/exchange-persisted-fetch'; 3 + 4 + import LocationsList from "./pages/LocationsList"; 5 + 6 + const client = createClient({ 7 + url: "https://trygql.dev/graphql/apq-weather", 8 + exchanges: [ 9 + persistedFetchExchange({ 10 + preferGetForPersistedQueries: true, 11 + }), 12 + fetchExchange 13 + ] 14 + }); 15 + 16 + function App() { 17 + return ( 18 + <Provider value={client}> 19 + <LocationsList /> 20 + </Provider> 21 + ); 22 + } 23 + 24 + export default App;
+13
examples/with-apq/src/index.css
··· 1 + body { 2 + margin: 0; 3 + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 + sans-serif; 6 + -webkit-font-smoothing: antialiased; 7 + -moz-osx-font-smoothing: grayscale; 8 + } 9 + 10 + code { 11 + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 + monospace; 13 + }
+12
examples/with-apq/src/index.js
··· 1 + import React from 'react'; 2 + import ReactDOM from 'react-dom'; 3 + import './index.css'; 4 + import App from './App'; 5 + 6 + ReactDOM.render( 7 + <React.StrictMode> 8 + <App /> 9 + </React.StrictMode>, 10 + document.getElementById('root') 11 + ); 12 +
+35
examples/with-apq/src/pages/LocationsList.js
··· 1 + import React from "react"; 2 + import { gql, useQuery } from "urql"; 3 + 4 + const LOCATIONS_QUERY = gql` 5 + query Locations($query: String!) { 6 + locations(query: $query) { 7 + id 8 + name 9 + } 10 + } 11 + `; 12 + 13 + const LocationsList = () => { 14 + const [result] = useQuery({ query: LOCATIONS_QUERY, variables: { query: "LON"} }); 15 + 16 + const { data, fetching, error } = result; 17 + 18 + return ( 19 + <div> 20 + {fetching && <p>Loading...</p>} 21 + 22 + {error && <p>Oh no... {error.message}</p>} 23 + 24 + {data && ( 25 + <ul> 26 + {data.locations.map((location) => ( 27 + <li key={location.id}>{location.name}</li> 28 + ))} 29 + </ul> 30 + )} 31 + </div> 32 + ); 33 + }; 34 + 35 + export default LocationsList;
+2 -2
examples/with-retry/README.md
··· 4 4 5 5 1. Install packages 6 6 7 + ```sh 7 8 yarn add urql @urql/exchange-retry graphql 8 - 9 9 # or 10 - 11 10 npm install --save urql @urql/exchange-retry graphql 11 + ``` 12 12 13 13 2. Setting up the Client and adding the `retryExchange` [here](src/App.js) 14 14