feat(refetch): support an array of conditions for handling association changes

Author: jedwards1211

README.md

@@ -5,7 +5,8 @@
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
-Handling Apollo cache updates after creating and deleting objects remains a
+Handling Apollo cache updates after creating and deleting objects, or
+associating and dissociating objects, remains a
 [poorly solved problem](https://github.com/apollographql/apollo-client/issues/899).
 `update` and `refetchQueries` props on `Mutation`s couple different areas of
 your app in a way you probably don't want, and they don't scale well as you add
@@ -16,6 +17,19 @@ and cache code.
 
 Until that happens, this is probably your best bet!
 
+# Table of Contents
+
+* [How it works](#how-it-works)
+* [Current limitations](#current-limitations)
+* [ES environment requirements](#es-environment-requirements)
+* [Type metadata usage](#type-metadata-usage)
+* [Handling Deletions](#handling-deletions)
+* [Handling Creation](#handling-creation)
+* [Handling associations being broken](#handling-associations-being-broken)
+* [Handling associations being created](#handling-associations-being-created)
+* [API](#api)
+  + [`refetch(client, typename, [ids], [idField])`](#refetchclient-typename-ids-idfield)
+
 ## How it works
 
 After you delete an object, you tell `apollo-magic-refetch` what `typename` and
@@ -140,6 +154,154 @@ const CreateDeviceFormContainer = () => (
 )
 ```
 
+## Handling associations being broken
+
+In this example, a view shows a list of `Organization`s, each containing a
+sublist of `User`s.  When one or more users is removed from an organization,
+it makes the following call:
+```js
+refetch(client, [
+  ['User', userIds],
+  ['Organization', organizationId],
+])
+```
+Passing an array to `refetch` means to only refetch queries containing all of
+the conditions in the array.  So the query below would be refetched, but a query
+containing only `Organizations` or a query containing only `User`s would not.
+
+```js
+import * as React from 'react'
+import gql from 'graphql-tag'
+import refetch from 'apollo-magic-refetch'
+import {Mutation, ApolloConsumer} from 'react-apollo'
+import OrganizationView from './OrganizationView'
+
+const query = gql`
+query {
+  Organizations {
+    id
+    name
+    Users {
+      id
+      username
+    }
+  }
+}
+`
+
+const mutation = gql`
+mutation removeUsersFromOrganization($organizationId: Int!, $userIds: [Int!]!) {
+  result: removeUsersFromOrganization(organizationId: $organizationId, userIds: $userIds) {
+    organizationId
+    userIds
+  }
+}
+`
+
+const OrganizationViewContainer = ({organization: {id, name, Users}}) => (
+  <ApolloConsumer>
+    {client => (
+      <Mutation
+        mutation={mutation}
+        update={(cache, {data: {result: {organizationId, userIds}}}) =>
+          refetch(client, [
+            ['User', userIds],
+            ['Organization', organizationId],
+          ])
+        }
+      >
+        {removeUsersFromOrganization => (
+          <OrganizationView
+            organization={organization}
+            onRemoveUsers={userIds => removeUsersFromOrganization({
+              variables: {organizationId, userIds},
+            })}
+          />
+        )}
+      </Mutation>
+    )}
+  </ApolloConsumer>
+)
+
+const OrganizationsViewContainer = () => (
+  <Query query={query}>
+    {({data}) => {
+      const {Organizations} = data || {}
+      if (!Organizations) return <div />
+      return (
+        <div>
+          <h1>Organizations</h1>
+          {Organizations.map((organization) => (
+            <OrganizationViewContainer
+              key={organization.id}
+              organization={organization}
+            />
+          )}
+        </div>
+      )
+    }}
+  </Query>
+)
+```
+
+## Handling associations being created
+
+Assuming the same `Organization`s/`User`s schema as above, the example performs
+the necessary refetches when a user is created and added to an organization:
+```js
+refetch(client, [
+  ['User'],
+  ['Organization', organizationId],
+])
+```
+In this case no `ids` are given for `User`, so any query containing the an
+`Organization` with the given `organizationId` in its results and selecting any
+`User`s would be refetched.  (This doesn't perfectly exclude cases that fetch
+Users and Organizations separately, instead of one nested inside the other, but
+it's better than nothing).
+
+```js
+import * as React from 'react'
+import gql from 'graphql-tag'
+import refetch from 'apollo-magic-refetch'
+import {Mutation, ApolloConsumer} from 'react-apollo'
+import CreateUserForm from './CreateUserForm'
+
+const mutation = gql`
+mutation createUser($organizationId: Int!, $values: CreateUser!) {
+  result: createUser(organizationId: $organizationId, values: $values) {
+    organizationId
+    id
+    username
+  }
+}
+`
+
+const CreateUserFormContainer = ({organizationId}) => (
+  <ApolloConsumer>
+    {client => (
+      <Mutation
+        mutation={mutation}
+        update={() =>
+          refetch(client, [
+            ['User'],
+            ['Organization', organizationId],
+          ])
+        }
+      >
+        {createUser => (
+          <CreateUserForm
+            onSubmit={values => createUser({
+              variables: {organizationId, values},
+            })}
+          />
+        )}
+      </Mutation>
+    )}
+  </ApolloConsumer>
+)
+```
+
 ## API
 
 ### `refetch(client, typename, [ids], [idField])`
@@ -150,9 +312,12 @@ const CreateDeviceFormContainer = () => (
 
 The `ApolloClient` in which to scan active queries.
 
-##### `typename: string`
+##### `typenameOrTerms: string | Array<Term>`
 
-The `__typename` of the GraphQL type that was created or deleted.
+The `__typename` of the GraphQL type that was created or deleted, or an array of
+`[typename, ids, idField]` tuples (`ids` and `idField` are optional).  If an
+array is given, a query must match all of the conditions in the array to be
+refetched.
 
 ##### `ids: any (*optional*)`
 

src/index.js

@@ -11,22 +11,51 @@ function normalizeIds(ids: any): Set<any> {
   return new Set([ids])
 }
 
-export default async function refetch(client: ApolloClient, typename: string, ids?: ?any, idField?: string = 'id'): Promise<any> {
+type Term = [string, any, ?string] | [string, any] | [string]
+
+function every<T>(array: $ReadOnlyArray<T>, predicate: (elem: T) => boolean): boolean {
+  for (let elem of array) {
+    if (!predicate(elem)) return false
+  }
+  return true
+}
+
+export default async function refetch(
+  client: ApolloClient,
+  typenameOrTerms: string | $ReadOnlyArray<Term>,
+  ids?: ?any,
+  idField?: string
+): Promise<any> {
   const types: Types = await getSchemaTypes(client)
 
-  const finalIds = ids != null ? normalizeIds(ids) : null
+  let terms
+  if (typeof typenameOrTerms === 'string') {
+    terms = [[typenameOrTerms, ids, idField]]
+  } else if (Array.isArray(typenameOrTerms)) {
+    terms = typenameOrTerms
+  } else {
+    throw new Error(`invalid typename or terms: ${typenameOrTerms}`)
+  }
 
   const {queryManager: {queries}} = client
   let promises = []
   for (let query of queries.values()) {
     const {document, observableQuery} = query
     if (!observableQuery) continue
     let data
-    if (finalIds) {
-      const currentResult = observableQuery.currentResult()
-      if (currentResult) data = currentResult.data
-    }
-    if (doesQueryContain(document, types, typename, data, finalIds, idField)) {
+    const currentResult = observableQuery.currentResult()
+    if (currentResult) data = currentResult.data
+
+    if (every(terms, ([typename, ids, idField]: any) =>
+      doesQueryContain(
+        document,
+        types,
+        typename,
+        data,
+        ids != null ? normalizeIds(ids) : null,
+        idField || 'id'
+      )
+    )) {
       promises.push(observableQuery.refetch())
     }
   }

test/integration.js

@@ -90,7 +90,12 @@ describe(`integration test`, function () {
         id: 3,
         username: 'bobilly',
         organizationIds: [2],
-      }]
+      }],
+      [4, {
+        id: 4,
+        username: 'saget',
+        organizationIds: [],
+      }],
     ])
 
     const schema = makeExecutableSchema({
@@ -106,7 +111,17 @@ describe(`integration test`, function () {
     })
   })
 
-  it(`basic test`, async function (): Promise<void> {
+  it(`throws when invalid typenameOrTerms is given`, async function (): Promise<void> {
+    let error
+    try {
+      await refetch(client, (2: any))
+    } catch (err) {
+      error = err
+    }
+    expect(error).to.exist
+  })
+
+  it(`handles deleted User`, async function (): Promise<void> {
     const query = gql`{
       orgs: Organizations {
         id
@@ -129,7 +144,7 @@ describe(`integration test`, function () {
       org.userIds = org.userIds.filter(id => id !== 2)
     }
 
-    await refetch(client, 'User', 2)
+    await refetch(client, 'User', [2])
 
     const {data: {orgs: finalOrgs}} = await observableQuery.currentResult()
 
@@ -138,4 +153,94 @@ describe(`integration test`, function () {
       [3],
     ])
   })
+  it(`handles User removed from org`, async function (): Promise<void> {
+    const query = gql`{
+      orgs: Organizations {
+        id
+        name
+        Users {
+          id
+          username
+        }
+      }
+    }`
+
+    const usersQuery = gql`{
+      Users {
+        id
+        username
+      }
+    }`
+
+    const observableQuery = client.watchQuery({query})
+    observableQuery.subscribe({})
+    await observableQuery.refetch()
+
+    const observableUsersQuery = client.watchQuery({query: usersQuery})
+    observableUsersQuery.subscribe({})
+    await observableUsersQuery.refetch()
+
+    const {data: {orgs}} = await observableQuery.currentResult()
+    expect(orgs.map(({id}) => id)).to.deep.equal([...Organizations.keys()]);
+
+    (Users.get(2): any).organizationIds = [1];
+    (Organizations.get(2): any).userIds = [3]
+
+    await refetch(client, [
+      ['User', 2],
+      ['Organization', 2],
+    ])
+
+    const {data: {orgs: finalOrgs}} = await observableQuery.currentResult()
+
+    expect(finalOrgs.map(({Users}) => Users.map(({id}) => id))).to.deep.equal([
+      [1, 2],
+      [3],
+    ])
+  })
+  it(`handles User added to org`, async function (): Promise<void> {
+    const query = gql`{
+      orgs: Organizations {
+        id
+        name
+        Users {
+          id
+          username
+        }
+      }
+    }`
+
+    const usersQuery = gql`{
+      Users {
+        id
+        username
+      }
+    }`
+
+    const observableQuery = client.watchQuery({query})
+    observableQuery.subscribe({})
+    await observableQuery.refetch()
+
+    const observableUsersQuery = client.watchQuery({query: usersQuery})
+    observableUsersQuery.subscribe({})
+    await observableUsersQuery.refetch()
+
+    const {data: {orgs}} = await observableQuery.currentResult()
+    expect(orgs.map(({id}) => id)).to.deep.equal([...Organizations.keys()]);
+
+    (Users.get(4): any).organizationIds.push(2);
+    (Organizations.get(2): any).userIds.push(4)
+
+    await refetch(client, [
+      ['User'],
+      ['Organization', new Set([2])],
+    ])
+
+    const {data: {orgs: finalOrgs}} = await observableQuery.currentResult()
+
+    expect(finalOrgs.map(({Users}) => Users.map(({id}) => id))).to.deep.equal([
+      [1, 2],
+      [2, 3, 4],
+    ])
+  })
 })