View 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"; |
View 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> | |
); |
View 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} />; |
View 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)}`); |
View 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> | |
); |
View 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> |
View 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"; |
View sample.js
const client = new ApolloClient({ | |
cache: new InMemoryCache().restore(window.__APOLLO_STATE__), | |
link, | |
}); |
View sample.html
<script> | |
window.__APOLLO_STATE__ = client.extract(); | |
</script> |
View sample.jsx
import gql from "graphql-tag"; | |
import { Query } from "react-apollo"; | |
const GET_DOGS = gql` | |
{ | |
dogs { | |
id | |
breed | |
} | |
} |
NewerOlder