facebook / facebook/relay

[relay-compiler] Should error if @refetchable queryName is the same as the fragment name

Open
#4,498 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Rust
Stars
19k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

We (Netflix) recently ran into a hard to debug issue where a pagination would throw at runtime because the refetch request was actually not a request, it was a fragment.

The fragment looked like this, and was intended to be used with `usePagination`:

```graphql
fragment useMyListRowData on LolomoMyListRow
@argumentDefinitions(first: { type: "Int", defaultValue: 10 }, afterCursor: { type: "String" })
@refetchable(queryName: "useMyListRowData") { # Oops, should be useMyListRowDataQuery
entitiesConnection(first: $first, after: $afterCursor)
@connection(key: "useMyListRowData__entitiesConnection") {
totalCount
edges {
...useDefaultRowEdge
}
}
}
```

The error here is really subtle. Notice that the `queryName` is `useMyListRowData`, which happens to be the same name as the fragment itself. This causes the query to not be generated, and then in the generated code the refetch operation references the very same fragment in which it is defined:

```js
"refetch": {
"connection": {
"forward": {
"count": "first",
"cursor": "afterCursor"
},
"backward": null,
"path": (v1/*: any*/)
},
"fragmentPathInResult": [
"node"
],
"operation": require('./useMyListRowData.graphql'), // Oh no, this is not a Request
"identifierField": "_id"
}
```

Since this will always result in a runtime error when trying to refetch the fragment, I believe the Relay compiler should error if it sees such a mistake.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.