Switch from gql-sketch to react-apollo

Tackling more ambitious graphql usecases requires standardizing on a client.

import React from 'react';
import { render, Text, View } from 'react-sketchapp';
import { ApolloClient, ApolloProvider, createNetworkInterface, gql, graphql } from 'react-apollo';
import type { User } from './types';
import { fonts, spacing } from './designSystem';
import Profile from './components/Profile';
import Space from './components/Space';

global.setTimeout = (fn, time) => {
  NSThread.sleepForTimeInterval(time / 1000);
  fn();
}

const UserList = ({ users }) =>
  <View style={{ flexDirection: 'row', flexWrap: 'wrap', width: users.length * 300 }}>
    {users.map(user => (
      <Space key={user.screen_name} h={spacing} v={spacing}>
        <Profile user={user} />
      </Space>
    ))}
  </View>

const Page = ({ data }) => (
  <View>
    <Text style={fonts['Title 1']}>Profile Cards w/ GraphQL</Text>
    { data.allProfiles && <UserList users={data.allProfiles} /> }
  </View>
);

const ProfilesQuery = gql`query allProfiles {
  allProfiles {
    screenname,
    name,
    description,
    location,
    url,
    profileImageUrl,
  }
}`;

const PageWithData = graphql(ProfilesQuery, {
  options: {
    fetchPolicy: 'network-only',
  },
})(Page);

const client = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: 'https://api.graph.cool/simple/v1/cj09zm1k4jcpc0115ecsoc1k4',
  }),
});

export default (context) => {
  render(
    <ApolloProvider client={client}>
      <PageWithData />
    </ApolloProvider>
  , context.document.currentPage())
}

Unfortunately, this doesn’t work — we only render once, and we can’t force react-apollo to render synchronously.

A way around this could be to have separate entry points for Sketch & non-Sketch to components -

/* baseComponent.js */
const Component = ({ data }) =>
  <div>{ data.message }</div>

export const query = `query message { }`;
export default Component;

/* Component.js */
import { graphql, gql } from 'react-apollo';
import Component, { query } from './baseComponent';

const query = gql`${query}`;
export default graphql(query)(Component)

/* Component.sketch.js */
import Component, { query } from './baseComponent';
export const query = query;
export default Component

/* index.js */
import Component from './Component';

render(<ApolloProvider client={client}><Component></ApolloProvider>, $('#root'));

/* index.sketch.js */
import Component, { query } from './Component';
import Client from 'gql-sketch';

Client(endpoint).query(query).then(data =>
  <Component data={data} />
) 

just typing this this seems like a mess so mayyybe not 🗡

[mathieudutour]

How about:

import { ApolloClient, ApolloProvider, createNetworkInterface, gql, graphql, getDataFromTree } from 'react-apollo';

const client = new ApolloClient({
  ssrMode: true,
  networkInterface: createNetworkInterface({
    uri: 'https://api.graph.cool/simple/v1/cj09zm1k4jcpc0115ecsoc1k4',
  }),
});

const app = (
    <ApolloProvider client={client}>
      <PageWithData />
    </ApolloProvider>
)

export default (context) => {
  return getDataFromTree(app).then(() => {
    render(app, context.document.currentPage())
  })
}

Basically, doing a server side rendering.

[jbaxleyiii]

@jongold @mathieudutour I’m working on this now 👍 I can’t get my local plugin to not break whenever I import something though 👎

Will keep you posted!