chore: add example SSR app built using Fastify

.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+es
+lib
+build

.eslintrc.js

@@ -34,6 +34,6 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
     'no-unused-vars': 'error',
-    'linebreak-style': ['error', 'unix'],
+    'linebreak-style': ['error', 'unix']
   }
-};
+}

.github/ISSUE_TEMPLATE/Bug_Report.md

@@ -4,7 +4,6 @@ about: Bugs or any unexpected issues.
 title: ''
 labels: bug
 assignees: ''
-
 ---
 
 ### Package

.github/ISSUE_TEMPLATE/Feature_Request.md

@@ -4,7 +4,6 @@ about: I have a suggestion for a new feature!
 title: ''
 labels: feature
 assignees: ''
-
 ---
 
 ### Description

.gitignore

@@ -8,3 +8,4 @@ dist
 es
 packages/graphql-hooks/README.md
 packages/*/LICENSE
+build

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+es
+lib
+build
+CHANGELOG.md

CONTRIBUTING.md

@@ -24,6 +24,8 @@ We use [Lerna](https://lernajs.io) to manage this monorepo, you will find the di
 
 Clone the repository and run `npm install`. This will install the root dependencies and all of the dependencies required by each package, using `lerna bootstrap`.
 
+If you want to test your changes against an example app then take a look at our [fastify-ssr example](examples/fastify-ssr).
+
 All contributions should use the [prettier](https://prettier.io/) formatter, pass linting and pass tests.
 You can do this by running:
 

README.md

@@ -151,9 +151,14 @@ const client = new GraphQLClient(config)
 
 ```js
 import { ClientContext } from 'graphql-hooks'
-<ClientContext.Provider value={client}>
-  {/* children can now consume the client context */}
-</ClientContext.Provider>
+
+function App() {
+  return (
+    <ClientContext.Provider value={client}>
+      {/* children can now consume the client context */}
+    </ClientContext.Provider>
+  )
+}
 ```
 
 To access the `GraphQLClient` instance, call `React.useContext(ClientContext)`:

examples/fastify-ssr/README.md

@@ -0,0 +1,32 @@
+# GraphQL Hooks Fastify SSR Example
+
+This example uses [Fastify](https://github.com/fastify/fastify) to serve a graphql server and do server side rendering. It's very basic but showcases the different functionality that `graphql-hooks` offers. This example is intended more for local development of the `graphql-hooks` packages.
+
+## How to use
+
+### Running as part of this repo
+
+In the root of this repository run:
+
+```bash
+npm install
+lerna run build
+cd examples/fastify-ssr
+npm run watch
+```
+
+To develop `packages/` with this example locally, you'll need to run `lerna run build` from the root to rebuild files after they've been changed.
+
+### Download the example in isolation:
+
+```bash
+curl https://codeload.github.com/nearform/graphql-hooks/tar.gz/master | tar -xz --strip=2 graphql-hooks-master/examples/fastify-ssr
+cd fastify-ssr
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run watch
+```

examples/fastify-ssr/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "fastify-ssr",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:client": "webpack",
+    "build:server": "babel src -d lib --copy-files",
+    "prebuild": "rm -rf build lib",
+    "build": "npm run build:server && npm run build:client",
+    "start": "node ./lib/index.js",
+    "watch:client": "webpack --watch",
+    "watch:server": "nodemon --watch src --ignore src/client --exec 'npm run build:server && npm run start | pino-pretty'",
+    "prewatch": "npm run prebuild",
+    "watch": "npm run build:client && npm run watch:server & npm run watch:client"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@reach/router": "^1.2.1",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "fastify": "^1.14.1",
+    "fastify-gql": "^0.8.0",
+    "fastify-static": "^1.1.0",
+    "graphql-hooks": "^3.0.0",
+    "graphql-hooks-memcache": "^1.0.4",
+    "graphql-hooks-ssr": "^1.0.1",
+    "isomorphic-unfetch": "^3.0.0",
+    "react": "16.8.4",
+    "react-dom": "16.8.4",
+    "react-tree-walker": "^4.3.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "nodemon": "^1.18.9",
+    "pino-pretty": "^2.5.0",
+    "webpack": "^4.29.1",
+    "webpack-cli": "^3.2.3",
+    "webpack-manifest-plugin": "^2.0.4",
+    "webpack-merge": "^4.2.1"
+  },
+  "browserslist": "> 0.25%, not dead",
+  "babel": {
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "node": "current"
+          }
+        }
+      ],
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-object-rest-spread",
+      "dynamic-import-node"
+    ]
+  }
+}

examples/fastify-ssr/src/app/AppShell.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Link, Router } from '@reach/router'
+
+// components
+import NotFoundPage from './pages/NotFoundPage'
+import HomePage from './pages/HomePage'
+import PaginationPage from './pages/PaginationPage'
+
+class AppShell extends React.Component {
+  render() {
+    return (
+      <div className="app-shell-component">
+        <h1>GraphQL Hooks</h1>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/users">PaginationPage</Link>
+        </nav>
+        <Router>
+          <HomePage path="/" />
+          <PaginationPage path="/users" />
+          <NotFoundPage default />
+        </Router>
+      </div>
+    )
+  }
+}
+
+AppShell.propTypes = {}
+
+export default AppShell

examples/fastify-ssr/src/app/components/Hello.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useQuery } from 'graphql-hooks'
+
+const HELLO_QUERY = `
+  query Hello($name: String) {
+    hello(name: $name)
+  }
+`
+
+function HelloComponent({ user }) {
+  const { loading, error, data } = useQuery(HELLO_QUERY, {
+    variables: { name: user.name }
+  })
+
+  if (loading) return 'loading HelloComponent...'
+  if (error) return 'error HelloComponent'
+
+  return <div>{data.hello}</div>
+}
+
+HelloComponent.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string
+  })
+}
+
+export default HelloComponent

examples/fastify-ssr/src/app/pages/HomePage.js

@@ -0,0 +1,82 @@
+import React, { Fragment } from 'react'
+
+import { useQuery, useManualQuery, useMutation } from 'graphql-hooks'
+
+// components
+import HelloComponent from '../components/Hello'
+
+const HOMEPAGE_QUERY = `
+  query HomepageQuery {
+    users {
+      name
+    }
+  }
+`
+
+const GET_FIRST_USER_QUERY = `
+  query FirstUser {
+    firstUser {
+      name
+    }
+  }
+`
+
+const CREATE_USER_MUTATION = `
+  mutation CreateUser($name: String!) {
+    createUser(name: $name) {
+      name
+    }
+  }
+`
+
+function HomePage() {
+  const [name, setName] = React.useState('')
+  const { loading, data, error, refetch: refetchUsers } = useQuery(
+    HOMEPAGE_QUERY
+  )
+  const [createUser] = useMutation(CREATE_USER_MUTATION)
+
+  const [getFirstUser, { data: firstUserData }] = useManualQuery(
+    GET_FIRST_USER_QUERY
+  )
+
+  async function createNewUser() {
+    await createUser({ variables: { name } })
+    setName('')
+    refetchUsers()
+  }
+
+  return (
+    <div>
+      Home page
+      {loading && <div>...loading</div>}
+      {error && <div>error occured</div>}
+      {!loading && !error && data.users && (
+        <Fragment>
+          List of users:
+          {data.users.length === 0 && <span> No users found</span>}
+          {!!data.users.length && (
+            <ul>
+              {data.users.map((user, i) => (
+                <li key={i}>{user.name}</li>
+              ))}
+            </ul>
+          )}
+          <HelloComponent user={data.users[0]} />
+        </Fragment>
+      )}
+      <div>
+        <input
+          type="text"
+          value={name}
+          onChange={e => setName(e.target.value)}
+        />
+        <button onClick={createNewUser}>Create User</button>
+      </div>
+      <button onClick={getFirstUser}>Manually trigger Query</button>
+      <div>First User: {firstUserData && firstUserData.firstUser.name}</div>
+    </div>
+  )
+}
+
+export default HomePage

examples/fastify-ssr/src/app/pages/NotFoundPage.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+function NotFoundPage() {
+  return <div>404 - Not Found</div>
+}
+
+export default NotFoundPage

examples/fastify-ssr/src/app/pages/PaginationPage.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { useQuery } from 'graphql-hooks'
+
+const USERS_QUERY = `
+  query UsersQuery($skip: Int, $limit: Int) {
+    users(skip: $skip, limit: $limit) {
+      name
+    }
+  }
+`
+
+function PaginationPage() {
+  const [page, setPage] = React.useState(1)
+  const { data } = useQuery(USERS_QUERY, {
+    variables: {
+      limit: 1,
+      skip: page - 1
+    }
+  })
+
+  return (
+    <div>
+      User Pagination Users:
+      <ul>
+        {data &&
+          data.users &&
+          data.users.map((user, i) => <li key={i}>{user.name}</li>)}
+      </ul>
+      <button onClick={() => setPage(page - 1)}>Prev</button>
+      <button onClick={() => setPage(page + 1)}>Next</button>
+    </div>
+  )
+}
+
+export default PaginationPage

examples/fastify-ssr/src/client/js/app-shell.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { hydrate } from 'react-dom'
+
+import AppShell from '../../app/AppShell'
+
+// graphql-hooks
+import { GraphQLClient, ClientContext } from 'graphql-hooks'
+import memCache from 'graphql-hooks-memcache'
+
+const initialState = window.__INITIAL_STATE__
+const client = new GraphQLClient({
+  url: '/graphql',
+  cache: memCache({ initialState })
+})
+
+const App = (
+  <ClientContext.Provider value={client}>
+    <AppShell />
+  </ClientContext.Provider>
+)
+
+hydrate(App, document.getElementById('app-root'))

examples/fastify-ssr/src/index.js

@@ -0,0 +1 @@
+require('./server')()