allow optional variables

Changelog.md

@@ -4,6 +4,10 @@ Expect active development and potentially significant breaking changes in the `0
 
 ### vNext
 
+### v0.5.2
+
+- Feature: Allow optional variables by passing null value on behalf of the variable
+
 ### v0.5.1
 
 - Feature: Added link to [recompose](https://github.com/acdlite/recompose) to use the `compose` function. This makes it easy to combine multiple queries on a single component. [#194](https://github.com/apollostack/react-apollo/pull/194)

src/graphql.tsx

@@ -177,14 +177,20 @@ export default function graphql(
       if (opts.variables || !operation.variables.length) return opts;
 
       let variables = {};
-      for (let { variable } of operation.variables) {
+      for (let { variable, type } of operation.variables) {
         if (!variable.name || !variable.name.value) continue;
 
         if (typeof props[variable.name.value] !== 'undefined') {
           variables[variable.name.value] = props[variable.name.value];
           continue;
         }
 
+        // allow optional props
+        if (type.kind !== 'NonNullType') {
+          variables[variable.name.value] = null;
+          continue;
+        }
+
         invariant(typeof props[variable.name.value] !== 'undefined',
           `The operation '${operation.name}' wrapping '${getDisplayName(WrappedComponent)}' ` +
           `is expecting a variable: '${variable.name.value}' but it was not found in the props ` +

test/react-web/client/graphql/queries.tsx

@@ -474,7 +474,7 @@ describe('queries', () => {
     mount(<ProviderMock client={client}><Container first={null} /></ProviderMock>);
   });
 
-  it('errors if the passed props don\'t contain the needed variables', () => {
+  it('don\'t error on optional required props', () => {
     const query = gql`
       query people($first: Int) {
         allPeople(first: $first) { people { name } }
@@ -489,6 +489,30 @@ describe('queries', () => {
     const client = new ApolloClient({ networkInterface });
     const Container =  graphql(query)(() => null);
 
+    let error = null;
+    try {
+      mount(<ProviderMock client={client}><Container frst={1} /></ProviderMock>);
+    } catch (e) { error = e; }
+
+    expect(error).to.be.null;
+
+  });
+
+  it('errors if the passed props don\'t contain the needed variables', () => {
+    const query = gql`
+      query people($first: Int!) {
+        allPeople(first: $first) { people { name } }
+      }
+    `;
+    const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
+    const variables = { first: 1 };
+    const networkInterface = mockNetworkInterface({
+      request: { query, variables },
+      result: { data },
+    });
+    const client = new ApolloClient({ networkInterface });
+    const Container =  graphql(query)(() => null);
+
     try {
       mount(<ProviderMock client={client}><Container frst={1} /></ProviderMock>);
     } catch (e) {