mirror of
https://github.com/wassname/talk.git
synced 2026-06-27 20:07:24 +08:00
Kiwi
94 lines
2.5 KiB
Plaintext
94 lines
2.5 KiB
Plaintext
---
|
|
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)
|
|
);
|
|
```
|