---
name: Workarounds
---

# Workarounds

A place to write down temporary workarounds.

## Babel

Babel versions are currently locked to 7.0.0-beta.49 because of this bug:

https://github.com/babel/babel/issues/8167#issuecomment-397295483

## Relay Client Side Schema Extensions

We use Client Side Schema Extension in `Relay` to store client and UI related state. It works great, the only limitation currently is that locally created `Records` are garbage collected. We created a little helper in `coral-framework/lib/relay/createAndRetain.ts` that creates and retains these `Records` forever. Hopefully this gets resolved and we don't need to do this kind of manual lifecycle management.

Related: https://github.com/facebook/relay/issues/1656#issuecomment-374079965

```ts
import { commitLocalUpdate, Environment } from "relay-runtime";

import {
  createAndRetain,
  LOCAL_ID,
  LOCAL_TYPE,
} from "coral-framework/lib/relay";

commitLocalUpdate(environment, s => {
  const root = s.getRoot();
  // Create the Local Record which is the Root for the client states.
  const localRecord = createAndRetain(environment, s, LOCAL_ID, LOCAL_TYPE);
  root.setLinkedRecord(localRecord, "local");
});
```

## Type inference for `compose(...fn)`

[recompose](https://github.com/acdlite/recompose) is a great library to work with Higher-Order-Components. `Typescript` is powerful enough to type a lot of HOC in a way that it works with type inference. However type inference currently does not work for `compose()` until this https://github.com/Microsoft/TypeScript/pull/24626 lands.

That's why in many cases instead of doing this

```ts
export type ContainerProps {
  …
}

const enhance = compose<Props, ContainerProps>(
  withLocalStateContainer(…),
  withFragmentContainer(…)
);

export default enhance(Container);
```

We do this

```ts
const enhanced = withLocalStateContainer(
  …
)(
  withFragmentContainer(
    …
  )(Container)
);

export type ContainerProps = ReturnPropTypes<typeof enhanced>;
export default enhanced;
```

A working chaining example looks like this:

```
const enhanced = withFragmentContainer<{ data: Data }>({
  data: graphql`
    fragment PermalinkViewContainerQuery on Query
      @argumentDefinitions(commentID: { type: "ID!" }) {
      comment(id: $commentID) {
        ...CommentContainer_comment
      }
    }
  `,
})(
  withLocalStateContainer<Local>(
    graphql`
      fragment PermalinkViewContainerLocal on Local {
        storyURL
      }
    `
  )(PermalinkViewContainer)
);
```