takanorip

<link rel="preload" as="font" type="font/woff2" href="fonts/font.woff2" crossorigin="anonymous">

takanorip

/*
* "InuFont" licensed under the SIL Open Font License
* https://www.hogehoge.com/（配布元のURL）
*/
@font-face {
  font-family: 'Fuga';
  src: url('Fuga.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

takanorip

/*
* Copyright © [yyyy] [配布者の名前]
* http://www.hogehoge.com/（配布元のURL）
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*

takanorip

query UserData {
  me {
    name
    friends {
      name
    }
  }
}

takanorip

{
  "me": {
    "name": "takanori",
    "friends": [
      {
        "name": "taro"
      },
      {
        "name": "noriko"
      }

takanorip

import gql from "graphql-tag";
import { Query } from "react-apollo";

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

takanorip

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

takanorip

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

takanorip

// 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

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>