Is there a way/ project that would make apollo-client queries return Immutable.js structure?

[gajus]

I was searching to find existing issues/ projects that would ApolloClient return Immutable.js structure. However, I did not find anything.

If you are using Immutable.js with apollo-client, how are you using it?

[tpinne]

Having an ImmutableJS cache would be great for use with react for example. It would be very easy then to have a performant application because one could just use a PureComponent and the shouldComponentUpdate function could easily do all the work, even for nested data structures.

[fenos]

Any news on this? I tried to implement my Own Immutable cache as following:

import { Map, fromJS } from 'immutable';

export class ImmutableCache {
  constructor(data = Map()) {
    if (!(data instanceof Map)) {
      this.data = fromJS(data);
    } else {
      this.data = data;
    }
  }

  toObject() {
    return this.data.toJS();
  }

  get(dataId: string) {
    return this.data.get(dataId);
  }

  set(dataId, value) {
    this.data = this.data.set(dataId, fromJS(value));
  }

  delete(dataId): void {
    this.data = this.data.set(dataId, undefined);
  }

  clear(): void {
    this.data = Map();
  }

  replace(newData) {
    this.data = newData || Map();
  }
}

export function immutableCache(seed) {
  return new ImmutableCache(seed);
}

Then i passed the option storeFactory as following:

const cache = new InMemoryCache({
    storeFactory: immutableCache,
});

However it doesn't work. The props are not getting passed to the component. No errors are shown in the console.

Any idea how i can achieve result queries as an Immutable Map/List?

This is the work around i'm using now which is repetitive and not fancy:

const data = graphql(homeQuery, {
  props: ({ data: { catalogue, loading } }) => ({
    catalogue: fromJS(catalogue), // Here transform to immutable structure
    catalogueLoading: loading,
  }),
});

[fenos]

Hello? Anyone can help 5 minutes to suggest the way to go with this, please?!!!! I'll make the relevant work needed to make it work.

[ShockiTV]

Why you would go the lengths to have something in immutable? Graphql HoC would already trigger re-render only in case watched query got updated. So you could than transform it back to standard JS for presentational components to consume?

Using PureComponent? Where ? Graphql HoC is already doing the container work. And for Presentational components you should not pass immutable in.

Just throw in few pure HoC's from recompose to filter out unnecessary re-renders or find what is causing them and cut there.

It helps redux cause you are doing comparison in mapStateToProps part, but have you checked the observing method in Apollo? Cause I remember it is more in a observable style.

[gajus]

Why you would go the lengths to have something in immutable? Graphql HoC would already trigger re-render only in case watched query got updated.

Not everyone is using GraphQL HoC. (I am assuming you are referring to Apollo React abstraction.) Others are simply using apollo-client to make requests – integrate with redux.

[softhib]

I really suggest you to try Apollo Client 2.0 InMemoryCache and so put out Redux of your app for your data state management. My experience is that it is really convenient because it provide a lot of nice management State features which allow you to fetch data, loadMore data, get the network status of your loadings, implement a way to modify your store without refetching all your data frequently and so quickly render your data by fetching the most from the cache.

You just have to accept to leave your habits with redux.

[elmarsto]

There are very good reasons to support Immutable that have little to do with actually keeping things immutable. Immutable provides a rich set of FP datatypes and a lot of stuff is built on them, including every other piece of state in my current app. Honestly these days I'm using recompose to trivially wrap data like this:

compose(
  Apollo.graphql(some_query), // returns 'data' prop
  Recompose.withProps(({ data }) => ({ data: Immutable.fromJS( data ) }), // data is now a Map
)(Component)

which is fine, really, but involves keystrokes. Don't make devs type things ;D

[hwillson]

To help provide a more clear separation between feature requests / discussions and bugs, and to help clean up the feature request / discussion backlog, Apollo Client feature requests / discussions are now being managed under the https://github.com/apollographql/apollo-feature-requests repository.

This feature request / discussion will be closed here, but anyone interested in migrating this issue to the new repository (to make sure it stays active), can click here to start the migration process. This manual migration process is intended to help identify which of the older feature requests are still considered to be of value to the community. Thanks!