https://github.com/jotaijs/jotai-apollo
Apollo graphql client integration for jotai :rocket: :ghost:
https://github.com/jotaijs/jotai-apollo
apollo apollo-client apollo-graphql integration jotai react
Last synced: 3 months ago
JSON representation
Apollo graphql client integration for jotai :rocket: :ghost:
- Host: GitHub
- URL: https://github.com/jotaijs/jotai-apollo
- Owner: jotaijs
- License: mit
- Created: 2021-11-29T07:24:32.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-18T08:39:59.000Z (almost 2 years ago)
- Last Synced: 2025-03-28T10:21:21.140Z (3 months ago)
- Topics: apollo, apollo-client, apollo-graphql, integration, jotai, react
- Language: TypeScript
- Homepage:
- Size: 113 KB
- Stars: 52
- Watchers: 4
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Jotai Apollo 🚀👻
[](https://discord.gg/poimandres)
Minimal `@apollo/client` integration for jotai, similar to `jotai/urql`.
## Install
You have to install `@apollo/client` and `jotai` to access this bundle and its functions.
```
yarn add jotai-apollo jotai @apollo/client
```
## atomsWithQuery
`atomsWithQuery` creates two atoms with a query. It internally uses [client.watchQuery](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.watchQuery).
```ts
import { useAtom } from 'jotai'
import { ApolloClient, gql } from '@apollo/client'
import { atomsWithQuery } from 'jotai-apollo'
const client = new ApolloClient({ ... })
const query = gql`
query Count {
getCount {
count
}
}
`
const [countAtom, countStatusAtom] = atomsWithQuery(
(get) => ({
query
}),
() => client, // optional
)
const App = () => {
const [data] = useAtom(countAtom)
return
{JSON.stringify(data)}
}
```
type:
```ts
export const atomsWithQuery = <
Data,
Variables extends object = OperationVariables
>(
getArgs: (get: Getter) => QueryArgs,
getClient: (get: Getter) => ApolloClient = (get) => get(clientAtom)
): readonly [
dataAtom: WritableAtom,
statusAtom: WritableAtom, AtomWithQueryAction>
]
```
### Examples
[Rick & Morty characters](https://stackblitz.com/edit/react-ts-wjkdmk?file=index.tsx)
## atomsWithMutation
`atomsWithMutation` creates two atoms with a mutation. It internally uses [client.mutate](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.mutate).
```js
import { useAtom } from 'jotai'
import { ApolloClient, gql } from '@apollo/client'
import { atomsWithMutation } from 'jotai-apollo'
const client = new ApolloClient({ ... })
const mutation = gql`
mutation Count {
setCount {
count
}
}
`
const [countAtom, countStatusAtom] = atomsWithMutation(
(get) => ({
mutation
}),
() => client,
)
const App = () => {
const [data, mutate] = useAtom(countAtom)
return
{JSON.stringify(data)} Click me
}
```
type:
```ts
export function atomsWithMutation<
Data = any,
Variables = OperationVariables,
Context = DefaultContext,
Extensions = Record,
Result extends FetchResult = FetchResult<
Data,
Context,
Extensions
>
>(
getClient: (get: Getter) => ApolloClient = (get) => get(clientAtom)
): readonly [
dataAtom: WritableAtom, Promise>,
statusAtom: WritableAtom<
Result,
Action,
Promise
>
]
```
### Examples
Contributions are welcome.
## atomsWithSubscription
`atomsWithSubscription` creates two atoms with a mutation. It internally uses [client.subscribe](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.subscribe).
```js
import { useAtom } from 'jotai'
import { ApolloClient, gql } from '@apollo/client'
import { atomsWithSubscription } from 'jotai-apollo'
const client = new ApolloClient({ ... })
const subscription = gql`
subscription Count {
getCount {
count
}
}
`
const [countAtom, countStatusAtom] = atomsWithSubscription(
(get) => ({
query: subscription
}),
() => client
)
const App = () => {
const [data] = useAtom(countAtom)
return
{JSON.stringify(data)}
}
```
type:
```ts
export function atomsWithSubscription<
Data,
Variables extends object = OperationVariables
>(
getArgs: (get: Getter) => SubscriptionOptions,
getClient: (get: Getter) => ApolloClient = (get) => get(clientAtom)
): readonly [
dataAtom: WritableAtom,
statusAtom: WritableAtom, Action>
]
```
### Examples
Contributions are welcome.
### Contributing
If you have found what you think is a bug/feature, please [file an issue](https://github.com/pmndrs/jotai-apollo/issues/new).
For questions around this integration, prefer [starting a discussion](https://github.com/pmndrs/jotai-apollo/discussions/new).