Automatically format incoming GraphQL query data with Apollo Client
Remote data from an external API doesn't always line up with the format we expect it to be in. From enum values not corresponding to their client-side string representation to float values not being return as a currency string, there are many cases where you need to automatically format incoming data.
apollo-link-response-resolver
is a solution to this problem using a resolver format that GraphQL and Redux users will be comfortable with. You create your resolvers map and hook apollo-link-response-resolver
in to ApolloClient and the rest is automatic--all incoming response data will be formatted based on the resolvers you provided.
Quick Start
To get started, install apollo-link-response-resolver
from npm:
npm install -S apollo-link-response-resolver
The rest of the instructions assume that you have already set up Apollo Client in your application. After you install the package, you can create your response resolver by calling responseResolver
and passing in a resolver map. A resolver map describes how to update the fields on each type of data.
Let's look at a simple example where we're updating the fullname
field on all pieces of data coming from the server with the Account
type:
import { withResponseResolver } from 'apollo-link-response-resolver'
const resolvers = {
Account: {
fullname: name => name.toUpperCase(),
},
}
const responseResolverLink = withResponseResolver(resolvers)
To hook up your response resolvers to Apollo Client, add your link to the other links in your Apollo Link chain. You want to make sure that your link comes before HttpLink
.
const client = new ApolloClient({
cache,
link: ApolloLink.from([responseResolverLink, new HttpLink()]),
})
Example Application
TODO