(examples) - react.js (#1573)

* (examples) - react.js

.gitignore

@@ -16,3 +16,5 @@ exchanges/*/LICENSE
 # TODO: Figure out how to remove these:
 tmp/
 dist/
+examples/*/public
+examples/*/yarn.lock

examples/with-react/README.md

@@ -0,0 +1,15 @@
+# Integrating with React
+
+Integrating urql is as simple as:
+
+1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
+
+```sh
+yarn add urql graphql
+# or
+npm install --save urql graphql
+```
+
+2. Setting up the Client [here](src/App.js)
+
+3. Execute the Query [here](src/pages/PokemonList.js)

examples/with-react/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "react-urql-query",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "graphql": "^15.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "urql": "^2.0.2"
+  },
+  "devDependencies": {
+    "react-scripts": "4.0.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/with-react/src/App.js

@@ -0,0 +1,17 @@
+import { createClient, Provider } from "urql";
+
+import PokemonList from "./pages/PokemonList";
+
+const client = createClient({
+  url: "https://trygql.dev/graphql/basic-pokedex",
+});
+
+function App() {
+  return (
+    <Provider value={client}>
+      <PokemonList />
+    </Provider>
+  );
+}
+
+export default App;

examples/with-react/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

examples/with-react/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+

examples/with-react/src/pages/PokemonList.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { gql, useQuery } from "urql";
+
+const POKEMONS_QUERY = gql`
+  query Pokemons {
+    pokemons(limit: 10) {
+      id
+      name
+    }
+  }
+`;
+
+const PokemonList = () => {
+  const [result] = useQuery({ query: POKEMONS_QUERY });
+
+  const { data, fetching, error } = result;
+
+  return (
+    <div>
+      {fetching && <p>Loading...</p>}
+
+      {error && <p>Oh no... {error.message}</p>}
+
+      {data && (
+        <ul>
+          {data.pokemons.map((pokemon) => (
+            <li key={pokemon.id}>{pokemon.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default PokemonList;