How can I use Apollo/GraphQL to incrementally/progressively query a datasource?

Question

I have a query like this in my React/Apollo application:

const APPLICATIONS_QUERY = gql`
  {
    applications {
      id
      applicationType {
        name
      }
      customer {
        id
        isActive
        name
        shortName
        displayTimezone
      }
      deployments {
        id
        created
        user {
          id
          username
        }
      }
      baseUrl
      customerIdentifier
      hostInformation
      kibanaUrl
      sentryIssues
      sentryShortName
      serviceClass
      updown
      updownToken
    }
  }
`;

The majority of the items in the query are in a database and so the query is quick. But a couple of the items, like sentryIssues and updown rely on external API calls, so they make the duration of the query very long.

I'd like to split the query into the database portion and the external API portion so I can show the applications table immediately and add loading spinners for the two columns that hit an external API... But I can't find a good example of incremental/progressive querying or merging the results of two queries with Apollo.

score 2 · Accepted Answer · edited Aug 09 '23 at 21:35

This is a good example of where the @defer directive would be helpful. You can indicate which fields you want to defer for a given query like this:

const APPLICATIONS_QUERY = gql`
  {
    applications {
      id
      applicationType {
        name
      }
      customer @defer {
        id
        isActive
        name
        shortName
        displayTimezone
      }
    }
  }
`

In this case, the client will make one request but receive 2 responses -- the initial response with all the requested fields sans customer and a second "patch" response with just the customer field that's fired once that resolver is finished. The client does the heavy lifting and pieces these two responses together for you -- there's no additional code necessary.

Please be aware that only nullable fields can be deferred, since the initial value sent with the first response will always be null. As a bonus, react-apollo exposes a loadingState property that you can use to check the loading state for your deferred fields:

<Query query={APPLICATIONS_QUERY}>
  {({ loading, error, data, loadingState }) => {
    const customerComponent = loadingState.applications.customer
      ? <CustomerInfo customer={data.applications.customer} />
      : <LoadingIndicator />
    // ...
  }}
</Query>

The only downside is this is an experimental feature, so at the moment you have to install the alpha preview version of both apollo-server and the client libraries to use it.

See the docs for full details.

ah... this is only supported on apollo-server, sadly... we use apollo-client but for the server we use graphene-django so it looks like this approach won't for us — Beau, Oct 02 '18 at 21:19
@Beau If you're not using apollo-server, it's also feasible to split your single query into two or more smaller ones. You can then utilize the relevant query for each part of your UI. It's a little messier when dealing with arrays of objects, but I think it's still doable -- you would just have two (or more) separate arrays of application objects (i.e. `applicationsWithBaseInfo`, applicationsWithCustomerData` etc.). — Daniel Rearden, Oct 02 '18 at 23:40
If you go that route, I imagine you'll need to modify the `dataIdFromObject` function so that the queries' results don't end up overriding one another. I can update my answer to include a more complete example if you want. — Daniel Rearden, Oct 02 '18 at 23:42

How can I use Apollo/GraphQL to incrementally/progressively query a datasource?

1 Answers1