takanorip takanorip

## lit-apollo-sample.js
// CodeSandboxで動かすときにエラーが出たので
// babel-polyfillをimportしてる
import "babel-polyfill";
import gql from "graphql-tag";
import { ApolloClient } from "apollo-client";
import { ApolloQuery, html } from "lit-apollo";
import { InMemoryCache } from "apollo-cache-inmemory";
import { from } from "apollo-link";
import { HttpLink } from "apollo-link-http";

## html.js
const Html = ({ content, state }) => (
  <html>
    <body>
      <div id="root" dangerouslySetInnerHTML={{ __html: content }} />
      <script dangerouslySetInnerHTML={{
        __html: `window.__APOLLO_STATE__=${JSON.stringify(state).replace(/</g, '\\u003c')};`,
      }} />
    </body>
  </html>
);

## getDataFromTree.js
import { getDataFromTree } from "react-apollo"

app.use((req, res) => {
  const client = new ApolloClient(...);

  getDataFromTree(App).then(() => {
    const content = ReactDOM.renderToString(App);
    const initialState = client.extract();

    const html = <Html content={content} state={initialState} />;

## renderToStringWithData.js
import { renderToStringWithData } from "react-apollo"

const client = new ApolloClient(...);

renderToStringWithData(App).then((content) => {
  const initialState = client.extract();
  const html = <Html content={content} state={initialState} />;

  res.status(200);
  res.send(`<!doctype html>\n${ReactDOM.renderToStaticMarkup(html)}`);

## apollo-ssr-skip.jsx
const withClientOnlyUser = () => (
  <Query query={GET_USER_WITH_ID} ssr={false}>
    {({ data }) => <span>I won't be run on the server</span>}
  </Query>
);

## apollo-ssr-router-layout.js
import { Route, Switch } from 'react-router';
import { Link } from 'react-router-dom';
import React from 'react';

import routes from './routes';

const Layout = () =>
  <div>
    <nav>
      <ul>

## apollo-ssr-index.js
// react-router v4 を想定したサンプルですが
// その他のルーターでも動作します

import { ApolloProvider, getDataFromTree } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import Express from 'express';
import { StaticRouter } from 'react-router';
import { InMemoryCache } from "apollo-cache-inmemory";

## sample.js
const client = new ApolloClient({
  cache: new InMemoryCache().restore(window.__APOLLO_STATE__),
  link,
});

## sample.html
<script>
  window.__APOLLO_STATE__ = client.extract();
</script>

## sample.jsx
import gql from "graphql-tag";
import { Query } from "react-apollo";

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
	// CodeSandboxで動かすときにエラーが出たので
	// babel-polyfillをimportしてる
	import "babel-polyfill";
	import gql from "graphql-tag";
	import { ApolloClient } from "apollo-client";
	import { ApolloQuery, html } from "lit-apollo";
	import { InMemoryCache } from "apollo-cache-inmemory";
	import { from } from "apollo-link";
	import { HttpLink } from "apollo-link-http";
	const Html = ({ content, state }) => (
	<html>
	<body>
	<div id="root" dangerouslySetInnerHTML={{ __html: content }} />
	<script dangerouslySetInnerHTML={{
	__html: `window.__APOLLO_STATE__=${JSON.stringify(state).replace(/</g, '\\u003c')};`,
	}} />
	</body>
	</html>
	);
	import { getDataFromTree } from "react-apollo"

	app.use((req, res) => {
	const client = new ApolloClient(...);

	getDataFromTree(App).then(() => {
	const content = ReactDOM.renderToString(App);
	const initialState = client.extract();

	const html = <Html content={content} state={initialState} />;
	import { renderToStringWithData } from "react-apollo"

	const client = new ApolloClient(...);

	renderToStringWithData(App).then((content) => {
	const initialState = client.extract();
	const html = <Html content={content} state={initialState} />;

	res.status(200);
	res.send(`<!doctype html>\n${ReactDOM.renderToStaticMarkup(html)}`);
	const withClientOnlyUser = () => (
	<Query query={GET_USER_WITH_ID} ssr={false}>
	{({ data }) => <span>I won't be run on the server</span>}
	</Query>
	);
	import { Route, Switch } from 'react-router';
	import { Link } from 'react-router-dom';
	import React from 'react';

	import routes from './routes';

	const Layout = () =>
	<div>
	<nav>
	<ul>
	// react-router v4 を想定したサンプルですが
	// その他のルーターでも動作します

	import { ApolloProvider, getDataFromTree } from 'react-apollo';
	import { ApolloClient } from 'apollo-client';
	import { createHttpLink } from 'apollo-link-http';
	import Express from 'express';
	import { StaticRouter } from 'react-router';
	import { InMemoryCache } from "apollo-cache-inmemory";
	const client = new ApolloClient({
	cache: new InMemoryCache().restore(window.__APOLLO_STATE__),
	link,
	});
	<script>
	window.__APOLLO_STATE__ = client.extract();
	</script>
	import gql from "graphql-tag";
	import { Query } from "react-apollo";

	const GET_DOGS = gql`
	{
	dogs {
	id
	breed
	}
	}