-
Notifications
You must be signed in to change notification settings - Fork 758
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SSR in apollo examples #202
Comments
Is it actually possible? as I understand I have to hydrate |
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
// },
} |
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 :) |
Going to close this for now. |
@tannerlinsley so, am I able to access request url ( with this 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. |
example using
getDataFromTree
The text was updated successfully, but these errors were encountered: