https://github.com/mutesa-cedric/recoil-next
Continuation of Recoil (a react state management library discontinued by Meta)
https://github.com/mutesa-cedric/recoil-next
react recoil recoiljs state-management
Last synced: about 2 months ago
JSON representation
Continuation of Recoil (a react state management library discontinued by Meta)
- Host: GitHub
- URL: https://github.com/mutesa-cedric/recoil-next
- Owner: Mutesa-Cedric
- License: mit
- Created: 2024-11-27T12:27:56.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-18T17:17:00.000Z (about 2 months ago)
- Last Synced: 2025-08-18T19:22:22.830Z (about 2 months ago)
- Topics: react, recoil, recoiljs, state-management
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/recoil-next
- Size: 5.04 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-recoil-relay.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Recoil Relay Next · [](https://www.npmjs.com/package/recoil-relay-next) [](https://github.com/Mutesa-Cedric/Recoil-next/actions) [](https://github.com/Mutesa-Cedric/Recoil-next/blob/main/LICENSE) [](https://www.typescriptlang.org/)
The `recoil-relay-next` library helps [Recoil Next](https://github.com/Mutesa-Cedric/Recoil-next) perform type safe and efficient queries using [GraphQL](https://graphql.org/) with the [Relay](https://relay.dev) library.
Please see the [**Recoil Relay GraphQL Documentation**](https://recoiljs.org/docs/recoil-relay/introduction)
`recoil-relay` provides `graphQLSelector()` and `graphQLSelectorFamily()` selectors which can easily query with GraphQL. The queries are synced with the Recoil data-flow graph so downstream selectors can derive state from them, they can depend on upstream Recoil state, and they are automatically subscribed to any changes in the graph from Relay. Everything stays in sync automatically.
## Example
After setting up your Relay environment adding a GraphQL query is as simple as defining a [GraphQL selector](https://recoiljs.org/docs/recoil-relay/graphql-selectors).
```jsx
const userNameQuery = graphQLSelector({
key: 'UserName',
environment: myEnvironment,
query: graphql`
query UserQuery($id: ID!) {
user(id: $id) {
name
}
}
`,
variables: ({get}) => ({id: get(currentIDAtom)}),
mapResponse: data => data.user?.name,
});
```
Then use it like any other Recoil [selector](https://recoiljs.org/docs/api-reference/core/selector):
```jsx
function MyComponent() {
const userName = useRecoilValue(userNameQuery);
return {userName};
}
```
## Migration from Recoil Relay
`recoil-relay-next` is a drop-in replacement for the original `recoil-relay` library. You can migrate your existing Recoil Relay project with minimal changes:
### 1. Update your dependencies
Replace `recoil-relay` with `recoil-relay-next` in your `package.json`:
```json
{
"dependencies": {
"recoil-relay-next": "^0.2.0"
}
}
```
### 2. Update your imports
Simply change your import statements from `recoil-relay` to `recoil-relay-next`:
```javascript
// Before
import {graphQLSelector, graphQLSelectorFamily} from 'recoil-relay';
// After
import {graphQLSelector, graphQLSelectorFamily} from 'recoil-relay-next';
```
### 3. That's it!
Your existing Recoil Relay code will work exactly the same. All APIs, behavior, and functionality remain identical to the original Recoil Relay library.
## Installation
Please see the [Recoil Next installation guide](https://github.com/Mutesa-Cedric/Recoil-next#installation) for installing Recoil Next and the [Relay documentation](https://relay.dev/docs/getting-started/installation-and-setup/) for installing and setting up the Relay library, GraphQL compiler, Babel plugin, and ESLint plugin. Then add `recoil-relay-next` as a dependency.
## Contributing
Development of Recoil happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving Recoil.
- [Code of Conduct](./CODE_OF_CONDUCT.md)
- [Contributing Guide](./CONTRIBUTING.md)
### License
Recoil is [MIT licensed](./LICENSE).