Skip to content

Instantly share code, notes, and snippets.

Avatar
🍣
sushi

takanorip takanorip

🍣
sushi
View GitHub Profile
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
}
}
You can’t perform that action at this time.