SSR in apollo examples

[srghma]

example using getDataFromTree

[srghma]

Is it actually possible? as I understand I have to hydrate ApolloProvider in static.config.js, how can I get req.url there?

[srghma]

so far

import axios from 'axios'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import fetch from 'node-fetch'

import React from 'react'
import { Router, Link } from 'react-static'
import Routes from 'react-static-routes'
import { ApolloProvider } from 'react-apollo'

export default {
  getSiteProps: () => ({
    title: 'React Static',
  }),
  getRoutes: async () => {
    const { data: posts } = await axios.get('https://jsonplaceholder.typicode.com/posts')

    const client = new ApolloClient({
      link: new HttpLink({
        fetch,
        uri: 'http://fake.graphql.guru/graphql',
      }),
      cache: new InMemoryCache(),
      ssrMode: true,
    })

    const context = {}

    const app = (
      <ApolloProvider client={client}>
        <StaticRouter location={req.url} context={context}>
          <div>
            <nav>
              <Link to="/">Home</Link>
              <Link to="/about">About</Link>
              <Link to="/blog">Blog</Link>
            </nav>
            <div className="content">
              <Routes />
            </div>
          </div>
        </StaticRouter>
      </ApolloProvider>
    )

    await getDataFromTree(app)

    const initialState = client.cache.extract();

    window.__APOLLO_STATE__ = initialState

    return [
      {
        path: '/',
        component: 'src/containers/Home',
      },
      {
        path: '/about',
        component: 'src/containers/About',
      },
      {
        path: '/blog',
        component: 'src/containers/Blog',
        getProps: () => ({
          posts,
        }),
        children: posts.map(post => ({
          path: `/post/${post.id}`,
          component: 'src/containers/Post',
          getProps: () => ({
            post,
          }),
        })),
      },
      {
        is404: true,
        component: 'src/containers/404',
      },
    ]
  },
  // webpack: (config, { defaultLoaders }) => {
  //   config.module.rules = [
  //     {
  //       oneOf: [
  //         {
  //           test: /\.json$/,
  //           use: [{ loader: 'json-loader' }],
  //         },
  //         defaultLoaders.jsLoader,
  //         defaultLoaders.cssLoader,
  //         defaultLoaders.fileLoader,
  //       ],
  //     },
  //   ]
  //   return config
  // },
}

[tannerlinsley]

Theoretically this would be possible. Though I'm not sure how it will turn out yet. I like your mode of thinking though. I say keep going :)

[tannerlinsley]

Going to close this for now.

[srghma]

@tannerlinsley so, am I able to access request url (req.url) in static.config.js?

with this static.config.js

import axios from 'axios'

export default {
  getSiteProps: () => ({
    title: 'React Static',
  }),
  getRoutes: async () => {
    const { data: posts } = await axios.get('https://jsonplaceholder.typicode.com/posts')
    console.log(req)
    return [
      {
        path: '/',
        component: 'src/containers/Home',
      },
      {
        path: '/about',
        component: 'src/containers/About',
      },
      {
        path: '/blog',
        component: 'src/containers/Blog',
        getProps: () => ({
          posts,
        }),
        children: posts.map(post => ({
          path: `/post/${post.id}`,
          component: 'src/containers/Post',
          getProps: () => ({
            post,
          }),
        })),
      },
      {
        is404: true,
        component: 'src/containers/404',
      },
    ]
  },
  // webpack: (config, { defaultLoaders }) => {
  //   config.module.rules = [
  //     {
  //       oneOf: [
  //         {
  //           test: /\.json$/,
  //           use: [{ loader: 'json-loader' }],
  //         },
  //         defaultLoaders.jsLoader,
  //         defaultLoaders.cssLoader,
  //         defaultLoaders.fileLoader,
  //       ],
  //     },
  //   ]
  //   return config
  // },
}

I getting

 ~/projects/react-static/examples/apollo-redux   master  yr start
yarn run v1.3.2
$ react-static start

=> Copying public directory...
=> [✓] Public directory copied: 3.090ms
=> Building Routes...
ReferenceError: req is not defined
    at _callee$ (/home/bjorn/projects/react-static/examples/apollo-redux/static.config.js:9:17)
    at tryCatch (/home/bjorn/projects/react-static/examples/apollo-redux/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/home/bjorn/projects/react-static/examples/apollo-redux/node_modules/regenerator-runtime/runtime.js:299:22)
    at Generator.prototype.(anonymous function) [as next] (/home/bjorn/projects/react-static/examples/apollo-redux/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/home/bjorn/projects/react-static/examples/apollo-redux/static.config.js:17:191)
    at /home/bjorn/projects/react-static/examples/apollo-redux/static.config.js:17:361
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.