# graphql-hooks-ssr

> Server side rendering utils for graphql-hooks

Latest version **3.0.1** (published 2023-04-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install graphql-hooks-ssr
pnpm add graphql-hooks-ssr
yarn add graphql-hooks-ssr
bun add graphql-hooks-ssr
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2023-04-26 |
| First published | 2019-02-14 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1889 |
| Author | Brian Mullan |
| Maintainers | bmullan91, simoneb |
| Keywords | graphql, hooks, react, graphql-hooks, cache, ssr, server-side rendering |

## Links

- npm: https://www.npmjs.com/package/graphql-hooks-ssr
- Repository: https://github.com/nearform/graphql-hooks
- Homepage: https://github.com/nearform/graphql-hooks/blob/master/packages/graphql-hooks-ssr#readme
- Issues: https://github.com/nearform/graphql-hooks/issues
- npm.io page: https://npm.io/package/graphql-hooks-ssr

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.1 (latest) — 2023-04-26
- 3.0.0 — 2022-09-26
- 2.2.3 — 2022-04-29
- 2.2.2 — 2022-01-04
- 2.2.1 — 2021-08-04
- 2.2.0 — 2021-08-03
- 2.1.2 — 2021-06-17
- 2.1.1 — 2021-05-29
- 2.1.0 — 2021-01-04
- 2.0.0 — 2020-09-30
- 1.1.5 — 2019-11-28
- 1.1.4 — 2019-10-24
- 1.1.3 — 2019-06-21
- 1.1.2 — 2019-06-08
- 1.1.1 — 2019-04-08
- … 9 more at https://npm.io/package/graphql-hooks-ssr/versions

## README

# graphql-hooks-ssr

Server-side rendering utils for `graphql-hooks`

## Install

`npm install graphql-hooks-ssr`

or

`yarn add graphql-hooks-ssr`

## Quick Start

The below example is for `fastify` but the same principles apply for `express` & `hapi`.

```js
const { GraphQLClient, ClientContext } = require('graphql-hooks')
const memCache = require('graphql-hooks-memcache')
const { getInitialState } = require('graphql-hooks-ssr')
const { ServerLocation } = require('@reach/router')
// NOTE: use can use any 'fetch' polyfill
const fetch = require('isomorphic-unfetch')

app.get('/', async (req, reply) => {
  // Step 1: Create the client inside the request handler
  const client = new GraphQLClient({
    url: 'https://domain.com/graphql',
    cache: memCache(), // NOTE: a cache is required for SSR
    fetch
  })

  // Step 2: Provide the `client`
  // Optional: If your app contains a router, you'll need to tell it which route the user is on
  // based on the request.. this example uses @reach/router
  const App = (
    <ClientContext.Provider value={client}>
      <ServerLocation url={req.raw.url}>
        {/* Your App component goes here */}
      </ServerLocation>
    </ClientContext.Provider>
  )

  // Step 3: Use the getInitialState method from graphql-hooks-ssr
  // Pass in App + GraphQL client
  const initialState = await getInitialState({ App, client })

  // Step 4: Render the your App - all queries will now be cached
  const content = ReactDOMServer.renderToString(App)

  // Step 5: Serialise the initialState object + include it in the html payload
  const html = `
      <!DOCTYPE html>
      <html>
        <body>
          <div id="app-root">${content}</div>
          <script type="text/javascript">
            window.__INITIAL_STATE__=${JSON.stringify(initialState).replace(
              /</g,
              '\\u003c'
            )};
          </script>
        </body>
      </html>
    `

  reply.type('text/html').send(html)
})
```

### API

#### `getInitialState(options)`

Returns the serialisable cache after fetching all queries.

- `options.App`: The react component to render
- `options.client`: An instance of `GraphQLClient` from `graphql-hooks`
- `options.render`: A custom render function; defaults to `ReactDOMServer.renderToStaticMarkup`

---
_Source: https://npm.io/package/graphql-hooks-ssr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._