Skip to content

Instantly share code, notes, and snippets.

View takanorip's full-sized avatar
🍣
sushi

takanorip takanorip

🍣
sushi
41 followers · 1 following
View GitHub Profile
@takanorip
takanorip / lit-apollo-sample.js
Created December 11, 2018 17:37
// 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";
@takanorip
takanorip / html.js
Created December 10, 2018 03:21
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>
);
@takanorip
takanorip / getDataFromTree.js
Last active December 10, 2018 03:07
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} />;
@takanorip
takanorip / renderToStringWithData.js
Created December 10, 2018 03:00
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)}`);
@takanorip
takanorip / apollo-ssr-skip.jsx
Created December 10, 2018 00:52
const withClientOnlyUser = () => (
<Query query={GET_USER_WITH_ID} ssr={false}>
{({ data }) => <span>I won't be run on the server</span>}
</Query>
);
@takanorip
takanorip / apollo-ssr-router-layout.js
Created December 10, 2018 00:47
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>
@takanorip
takanorip / apollo-ssr-index.js
Last active December 10, 2018 02:55
// 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";
@takanorip
takanorip / sample.js
Created December 10, 2018 00:25
const client = new ApolloClient({
cache: new InMemoryCache().restore(window.__APOLLO_STATE__),
link,
});
@takanorip
takanorip / sample.html
Created December 10, 2018 00:23
<script>
window.__APOLLO_STATE__ = client.extract();
</script>
@takanorip
takanorip / sample.jsx
Created December 10, 2018 00:01
import gql from "graphql-tag";
import { Query } from "react-apollo";
const GET_DOGS = gql`
{
dogs {
id
breed
}
}