{
@@ -242,8 +242,8 @@ describe('queries', () => {
}
componentWillReceiveProps(nextProps) {
- if (!nextProps.people.loading && !hasFinished) {
- hasFinished = true;
+ if (!nextProps.people.loading && !finished) {
+ finished = true;
expect(nextProps.ctnr).to.equal(2);
done();
}
diff --git a/test/server/index.tsx b/test/server/index.tsx
index 569d887ad0..bcc98c3a37 100644
--- a/test/server/index.tsx
+++ b/test/server/index.tsx
@@ -3,25 +3,27 @@ import * as React from 'react';
import * as ReactDOM from 'react-dom/server';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { connect, ApolloProvider } from '../../src';
+import { getDataFromTree, renderToStringWithData } from '../../src/server';
import 'isomorphic-fetch';
-// Globally register gql template literal tag
import gql from 'graphql-tag';
+import mockNetworkInterface from '../mocks/mockNetworkInterface';
+
const { expect } = chai;
const client = new ApolloClient({
- networkInterface: createNetworkInterface('https://www.graphqlhub.com/playground')
+ networkInterface: createNetworkInterface('https://www.graphqlhub.com/playground'),
});
describe('SSR', () => {
it('should render the expected markup', (done) => {
const Element = ({ data }) => {
return {data.loading ? 'loading' : 'loaded'}
;
- }
+ };
const WrappedElement = connect({
- mapQueriesToProps: ({ ownProps }) => ({
+ mapQueriesToProps: () => ({
data: {
query: gql`
query Feed {
@@ -29,9 +31,9 @@ describe('SSR', () => {
login
}
}
- `
- }
- })
+ `,
+ },
+ }),
})(Element);
const component = (
@@ -52,4 +54,342 @@ describe('SSR', () => {
done(e);
}
});
+
+ describe('`getDataFromTree`', () => {
+ it('should run through all of the queries that want SSR', (done) => {
+ const Element = ({ data }) => {
+ return {data.loading ? 'loading' : data.currentUser.firstName}
;
+ };
+
+ const query = gql`
+ query App {
+ currentUser {
+ firstName
+ }
+ }
+ `;
+
+ const data = {
+ currentUser: {
+ firstName: 'James',
+ },
+ };
+
+ const networkInterface = mockNetworkInterface(
+ {
+ request: { query },
+ result: { data },
+ delay: 50,
+ }
+ );
+
+ const apolloClient = new ApolloClient({
+ networkInterface,
+ });
+
+ const WrappedElement = connect({
+ mapQueriesToProps: () => ({ data: { query } }),
+ })(Element);
+
+ const app = (
+
+
+
+ );
+
+ getDataFromTree(app)
+ .then(() => {
+ const markup = ReactDOM.renderToString(app);
+ expect(markup).to.match(/James/);
+ done();
+ })
+ .catch(console.error)
+ ;
+ });
+
+ it('should run return the initial state for hydration', (done) => {
+ const Element = ({ data }) => {
+ return {data.loading ? 'loading' : data.currentUser.firstName}
;
+ };
+
+ const query = gql`
+ query App {
+ currentUser {
+ firstName
+ }
+ }
+ `;
+
+ const data = {
+ currentUser: {
+ firstName: 'James',
+ },
+ };
+
+ const networkInterface = mockNetworkInterface(
+ {
+ request: { query },
+ result: { data },
+ delay: 50,
+ }
+ );
+
+ const apolloClient = new ApolloClient({
+ networkInterface,
+ });
+
+ const WrappedElement = connect({
+ mapQueriesToProps: () => ({
+ data: { query },
+ }),
+ })(Element);
+
+ const app = (
+
+
+
+ );
+
+ getDataFromTree(app)
+ .then(({ initialState }) => {
+ expect(initialState.apollo.data).to.exist;
+ expect(initialState.apollo.data['ROOT_QUERY.currentUser']).to.exist;
+ done();
+ });
+ });
+ it('shouldn\'t run queries if ssr is turned to off', (done) => {
+ const Element = ({ data }) => {
+ return {data.loading ? 'loading' : data.currentUser.firstName}
;
+ };
+
+ const query = gql`
+ query App {
+ currentUser {
+ firstName
+ }
+ }
+ `;
+
+ const data = {
+ currentUser: {
+ firstName: 'James',
+ },
+ };
+
+ const networkInterface = mockNetworkInterface(
+ {
+ request: { query },
+ result: { data },
+ delay: 50,
+ }
+ );
+
+ const apolloClient = new ApolloClient({
+ networkInterface,
+ });
+
+ const WrappedElement = connect({
+ mapQueriesToProps: () => ({
+ data: { query, ssr: false },
+ }),
+ })(Element);
+
+ const app = (
+
+
+
+ );
+
+ getDataFromTree(app)
+ .then(({ initialState }) => {
+ expect(initialState.apollo.data).to.exist;
+ expect(initialState.apollo.data['ROOT_QUERY.currentUser']).to.not.exist;
+ done();
+ });
+ });
+ });
+ describe('`renderToStringWithData`', () => {
+
+ // XXX break into smaller tests
+ // XXX mock all queries
+ it('should work on a non trivial example', function(done) {
+ this.timeout(10000);
+ const networkInterface = createNetworkInterface('http://graphql-swapi.parseapp.com/');
+ const apolloClient = new ApolloClient({
+ networkInterface,
+ // shouldBatch: true,
+ });
+
+ class Film extends React.Component {
+ render() {
+ const { data } = this.props;
+ if (data.loading) return null;
+ const { film } = data;
+ return {film.title}
;
+ }
+ };
+
+ const FilmWithData = connect({
+ mapQueriesToProps: ({ ownProps }) => ({
+ data: {
+ query: gql`
+ query GetFilm($id: ID!) {
+ film: node(id: $id) {
+ ... on Film {
+ title
+ }
+ }
+ }
+ `,
+ variables: { id: ownProps.id },
+ },
+ }),
+ })(Film);
+
+ class Starship extends React.Component {
+ render() {
+ const { data } = this.props;
+ if (data.loading) return null;
+ const { ship } = data;
+ return (
+
+
{ship.name} appeared in the following flims:
+
+
+ {ship.filmConnection.films.map((film, key) => (
+ -
+
+
+ ))}
+
+
+ {!data.loading && data.allStarships && data.allStarships.starships.map((ship, key) => (
+ -
+
+
+ ))}
+
+ );
+ }
+ }
+
+ const AllShipsWithData = connect({
+ mapQueriesToProps: () => ({
+ data: {
+ query: gql`
+ query GetShips {
+ allStarships(first: 2) {
+ starships {
+ id
+ }
+ }
+ }
+ `,
+ },
+ }),
+ })(Element);
+
+ class Planet extends React.Component {
+ render() {
+ const { data } = this.props;
+ if (data.loading) return null;
+ const { planets } = data.allPlanets;
+ return (
+
+
Planets
+ {planets.map((planet, key) => (
+
{planet.name}
+ ))}
+
+
Foo
+
+
+ );
+
+ class Bar extends React.Component {
+ render() {
+ return (
+
+ );
+ }
+ }
+
+ const app = (
+
+
+
+ );
+
+ renderToStringWithData(app)
+ .then(markup => {
+ expect(markup).to.match(/CR90 corvette/);
+ expect(markup).to.match(/Return of the Jedi/);
+ expect(markup).to.match(/Return of the Jedi/);
+ expect(markup).to.match(/Planets/);
+ expect(markup).to.match(/Tatooine/);
+ expect(markup).to.match(/__APOLLO_STATE__/);
+ done();
+ })
+ .catch(done);
+ });
+ });
});
diff --git a/tslint.json b/tslint.json
index f125713739..0f00049367 100644
--- a/tslint.json
+++ b/tslint.json
@@ -8,14 +8,13 @@
],
"ban": false,
"class-name": true,
- "curly": true,
+ "curly": false,
"eofline": true,
- "forin": true,
+ "forin": false,
"indent": [
true,
"spaces"
],
- "interface-name": false,
"jsdoc-format": true,
"label-position": true,
"label-undefined": true,