Abstract relay-style connections in Apollo client

Question

I am building an app that will use GraphQL on the backend and Apollo-client on the front-end. I am going to use Relay-style connection types as it would allow us to put metadata on relationships.

However, we don't want our react components to have to deal with the additional complexity added by connections. For legacy reasons and also because it seems cleaner, I would prefer that my react components don't have to deal with nodes and edges. I prefer to pass around:

Snippet 1:

const ticket = {
  title: 'My bug'
  authors: [{ login: 'user1', login: 'user2' }]
}

rather than

Snippet 2:

const ticket = {
  title: 'My bug'
  authors: {
    nodes: [{
      login: 'user1',
      login: 'user2',
    }]
  }
}

Also in typescript, I really don't see myself defining a ticket type that would contain nodes and metadata such as nextPage, lastPage etc...

I am trying to come up with an abstraction, maybe at the apollo client level that would allow me to automatically convert Snippet 2 to Snippet 1 while still allowing access to Snippet 1 when I actually need those metadata.

Has this problem been solved by someone else? Do you have suggestions on a possible solution? Am i heading in the wrong directions?

Daniel Rearden Daniel Rearden · Accepted Answer · 2019-08-19T21:08:38

Rather than trying to solve this client-side, you can simply expose additional fields in your schema. You can see this done with the official SWAPI example:

query {
  allFilms {

    # edges
    edges {
      node {
        ...FilmFields
      }
    }

    # nodes exposed directly
    films {
      ...FilmFields
    }
  }
}

This way you can query the nodes with or without the connection as needed without having to complicate things on the client side.

Abstract relay-style connections in Apollo client

1 Answers