Skip to content

Instantly share code, notes, and snippets.

@zth
Created April 10, 2019 05:32
Show Gist options
  • Save zth/3a32d1921a149ab53d8e81ecf5384111 to your computer and use it in GitHub Desktop.
Save zth/3a32d1921a149ab53d8e81ecf5384111 to your computer and use it in GitHub Desktop.
An example of where eslint-plugin-relay with unused-fields misses that fields are used in a function.
// collectConnectionNodes.js - Extracts and filters all nodes from a connection and returns it in a list, preserving the type information.
// @flow
export function collectConnectionNodes<T>(
connectionObj: ?{
+edges: ?$ReadOnlyArray<?{
+node: ?T
}>
}
): $ReadOnlyArray<T> {
if (connectionObj && connectionObj.edges && connectionObj.edges.length > 0) {
return connectionObj.edges.reduce((acc, curr) => {
if (curr && curr.node) {
acc.push(curr.node);
}
return acc;
}, []);
}
return [];
}
// SomeComponent.js
// Here's an excerpt of a component using edges/node without it being picked up by the linter
class SomeComponent extends React.Component<Props> {
...
render() {
const { user } = this.props;
const friends = collectConnectionNodes(user.friends); // The lint plugin misses that collectConnectionNodes uses edges/node, and reports the fields as unused.
return ...;
}
}
export default createFragmentContainer(
SomeComponent,
{
user: graphql`
fragment SomeComponent_user on User {
friends {
edges {
node {
id
firstName
}
}
}
}
`
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment