Apollo + store

- renames `__APOLLO_STATE__` -> `__APOLLO__`, for Apollo GraphQL rehydration on the client - passes per-request `store` to `createClient()`, for use-cases where store data is needed inside GraphQL requests (JWTs, etc)

Author: leebenson

src/entry/client.tsx

@@ -37,12 +37,12 @@ import { rehydrate, autosave } from "@/lib/store";
 
 // ----------------------------------------------------------------------------
 
-// Create Apollo client
-const client = createClient();
-
 // Create new MobX state
 const store = ((window as any).store = new Store());
 
+// Create Apollo client
+const client = createClient(store);
+
 // Create a browser history
 const history = createBrowserHistory();
 

src/entry/server.tsx

@@ -63,12 +63,12 @@ export interface IRouterContext {
 export default function(output: Output) {
  // Create Koa middleware to handle React requests
  return async (ctx: Context) => {
- // Create a new Apollo client
- const client = createClient();
-
- // Create new MobX state
+ // Create new MobX store
  const store = new Store();
 
+ // Create a new Apollo client
+ const client = createClient(store);
+
  // Create a fresh 'context' for React Router
  const routerContext: IRouterContext = {};
 
@@ -123,8 +123,8 @@ export default function(output: Output) {
  html={html}
  scripts={output.client.scripts()}
  window={{
- __APOLLO_STATE__: client.extract(), // <-- GraphQL store
- __STORE__: toJS(store), // <-- MobX state
+ __APOLLO__: client.extract(), // <-- GraphQL store
+ __STORE__: toJS(store), // <-- MobX store
  }}
  />,
  );

src/lib/apollo.ts

@@ -13,9 +13,15 @@ import { WebSocketLink } from "apollo-link-ws";
 import { getMainDefinition } from "apollo-utilities";
 import { SubscriptionClient } from "subscriptions-transport-ws";
 
+/* Local */
+import { Store } from "@/data/store";
+
 // ----------------------------------------------------------------------------
 
-export function createClient(): ApolloClient<NormalizedCacheObject> {
+export function createClient(
+ // @ts-ignore - useful to pass in the store for `Authorization` headers, etc
+ store: Store,
+): ApolloClient<NormalizedCacheObject> {
  // Create the cache first, which we'll share across Apollo tooling.
  // This is an in-memory cache. Since we'll be calling `createClient` on
  // universally, the cache will survive until the HTTP request is
@@ -28,13 +34,13 @@ export function createClient(): ApolloClient<NormalizedCacheObject> {
  // set to an external playground at https://graphqlhub.com/graphql
  const httpLink = new HttpLink({
  credentials: "same-origin",
- uri: GRAPHQL
+ uri: GRAPHQL,
  });
 
  // If we're in the browser, we'd have received initial state from the
  // server. Restore it, so the client app can continue with the same data.
  if (!SERVER) {
- cache.restore((window as any).__APOLLO_STATE__);
+ cache.restore((window as any).__APOLLO__);
  }
 
  // Return a new Apollo Client back, with the cache we've just created,
@@ -52,8 +58,8 @@ export function createClient(): ApolloClient<NormalizedCacheObject> {
  if (graphQLErrors) {
  graphQLErrors.map(({ message, locations, path }) =>
  console.log(
- `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
- )
+ `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
+ ),
  );
  }
  if (networkError) {
@@ -75,15 +81,15 @@ export function createClient(): ApolloClient<NormalizedCacheObject> {
  new WebSocketLink(
  // Replace http(s) with `ws` for connecting via WebSockts
  new SubscriptionClient(GRAPHQL.replace(/^https?/, "ws"), {
- reconnect: true // <-- automatically redirect as needed
- })
+ reconnect: true, // <-- automatically redirect as needed
+ }),
  ),
  // ... fall-back to HTTP for everything else
- httpLink
+ httpLink,
  )
- : httpLink // <-- just use HTTP on the server
+ : httpLink, // <-- just use HTTP on the server
  ]),
  // On the server, enable SSR mode
- ssrMode: SERVER
+ ssrMode: SERVER,
  });
 }