Apollo Link data mutation

Question

I'm trying to mutate the data within an apollo-link handler for an entire application: I want to remove all edges/nodes as to simplify the handling of the data within my application.

const consoleLink = new ApolloLink((operation, forward) => {
  return forward(operation).map((data) => {
    let data = getRidOfEdges(inData)
    return data
  })
})

When I try to change the data and return a modified copy of the data, the apollo handler in my vue components gets an empty data object ={}. I also tried to mutate the data in-place, but this doesn't work either: the vue component gets the original unchanged data.

apollo: {
  moduleQuery: {
    query: MODULE_DETAILS_QUERY,
    variables: {
      slug: 'video'
    },
    fetchPolicy: 'network-only',
    manual: true,
    result({data, loading, networkStatus}) {
        // after mutating data, I get
        // data == {}
    }

What's the explanation for this behavior? And how can I implement an Apollo link to be able to mutate data? Is this possible at all?

Answer 1

If the client is a GraphQL client and expecting the data to exist according to the GraphQL definitions, it'll dump any data that doesn't fit that model. If you control the server, just add an array of the node into the root of the connection. It doesn't have to be ONLY pageInfo and edges there. If you don't, you can stitch one in and do the same thing by extending those types, and THEN you can massage the data.

There isn't really an easy way to do data manipulation BETWEEN the producer and the consumer if they both follow the standard unless you do Stitching and Transformations, which changes the schema. In this case, you could have a separate endpoint with your own schema definitions that transforms the backend one into the structure you're looking for.