jbaxleyiii

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

const GET_USER_WITH_ID = gql`
  query getUser(id: $ID!) {
    user { name }
  }
`;

jbaxleyiii

const SUBMIT_COMMENT_MUTATION = gql`
  mutation submitComment($repoFullName: String!, $commentContent: String!) {
    submitComment(repoFullName: $repoFullName, commentContent: $commentContent) {
      postedBy {
        login
        html_url
      }
      createdAt
      content

jbaxleyiii

const withPollingQuery = graphql(GET_USER_WITH_ID, {
  options: () => ({ pollInterval: 1000 })
});

// alternatively you can pass an object
// const withPollingQuery = graphql(GET_USER_WITH_ID, {
//   options: { pollInterval: 1000 }
// });

const MyComponentWithData = withPollingQuery(MyComponent);

jbaxleyiii

const withUser = graphql(GET_USER_DATA, {
  options: (ownProps) => ({ skip: !ownProps.authenticated })
});
const MyComponentWithData = withUser(MyComponent);

jbaxleyiii

it('executes a query', (done) => {
  
  const query = gql` query people { allPeople(first: 1) { people { name } } }`;
  const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
  const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
  const client = new ApolloClient({ networkInterface });
  
  const withGraphQL = graphql(query);
  
  class Container extends Component {

jbaxleyiii

import { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

/*

  GraphQL Enhancers (resuable and shareable)
  
  Fragment Enhancers do the following:
   - attach the fragment / fragments statically to the component (or a way for an operation enhancer to read)

jbaxleyiii

//components/TodoApp.js
import { graphql } from 'react-apollo'

class TodoApp extends React.Component {
  render () { ... }
}

const withTodos = graphql(todosQuery, {
  props({ loading, data }) {
     return { todos: data ? data.todos : [] };

jbaxleyiii

import { renderToStringWithData } from "react-apollo/server"

// during request
renderToStringWithData(app).then(markup => {
  // send markup to client
});

jbaxleyiii

DECLARE @search AS NVARCHAR(100) = '';
    DECLARE @metersPerMile AS DECIMAL = 1609.34;
    DECLARE @smallGroupTypeId AS INT = 25;
    DECLARE @groupEntityTypeId AS INT = (SELECT Id FROM EntityType WHERE Name = 'Rock.Model.Group');
    DECLARE @tagAttributeId AS INT = 16815;
    DECLARE @childcareAttributeId AS INT = 5406;
    DECLARE @typeAttributeId AS INT = 16814;
    DECLARE @categoryAttributeId AS INT = 1409;
    IF OBJECT_ID('tempdb.dbo.#groupTags', 'U') IS NOT NULL DROP TABLE #groupTags;
    SELECT g.Id AS GroupId, CONVERT(NVARCHAR(MAX), dv.Value) AS Tag, 1 as TagValue

jbaxleyiii

------------------------------------------------------------------------------------
| Dependency                                          | Time     | Size   | # Deps |
------------------------------------------------------------------------------------
| @kadira/storybook                                   | 2m 15.4s | 56 MB  | 505    |
| norma-bower                                         | 1m 59.5s | 41 MB  | 369    |
| jest                                                | 1m 27.7s | 24 MB  | 323    |
| jest-cli                                            | 1m 25.8s | 24 MB  | 323    |
| norma-meteor-run                                    | 1m 8s    | 25 MB  | 201    |
| babel-jest                                          | 33.8s    | 6.7 MB | 120    |