- Notifications
You must be signed in to change notification settings - Fork4
Apollo graphql client integration for jotai 🚀 👻
License
NotificationsYou must be signed in to change notification settings
jotaijs/jotai-apollo
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Minimal@apollo/client integration for jotai, similar tojotai/urql.
You have to install@apollo/client andjotai to access this bundle and its functions.
yarn add jotai-apollo jotai @apollo/clientatomsWithQuery creates two atoms with a query. It internally usesclient.watchQuery.
import{useAtom}from'jotai'import{ApolloClient,gql}from'@apollo/client'import{atomsWithQuery}from'jotai-apollo'constclient=newApolloClient({ ...})constquery=gql` query Count { getCount { count } }`const[countAtom,countStatusAtom]=atomsWithQuery((get)=>({ query}),()=>client,// optional)constApp=()=>{const[data]=useAtom(countAtom)return<div>{JSON.stringify(data)}</div>}
type:
exportconstatomsWithQuery=<Data,Variablesextendsobject=OperationVariables>(getArgs:(get:Getter)=>QueryArgs<Variables,Data>,getClient:(get:Getter)=>ApolloClient<any>=(get)=>get(clientAtom)):readonly[dataAtom:WritableAtom<Data,AtomWithQueryAction>,statusAtom:WritableAtom<ApolloQueryResult<Data>,AtomWithQueryAction>]
atomsWithMutation creates two atoms with a mutation. It internally usesclient.mutate.
import{useAtom}from'jotai'import{ApolloClient,gql}from'@apollo/client'import{atomsWithMutation}from'jotai-apollo'constclient=newApolloClient({ ...})constmutation=gql` mutation Count { setCount { count } }`const[countAtom,countStatusAtom]=atomsWithMutation((get)=>({ mutation}),()=>client,)constApp=()=>{const[data,mutate]=useAtom(countAtom)return<div>{JSON.stringify(data)}<buttononClick={mutate}>Click me</button></div>}
type:
exportfunctionatomsWithMutation<Data=any,Variables=OperationVariables,Context=DefaultContext,Extensions=Record<string,any>,ResultextendsFetchResult<Data,Context,Extensions>=FetchResult<Data,Context,Extensions>>(getClient:(get:Getter)=>ApolloClient<any>=(get)=>get(clientAtom)):readonly[dataAtom:WritableAtom<Data,Action<Data,Variables,Context>,Promise<void>>,statusAtom:WritableAtom<Result,Action<Data,Variables,Context>,Promise<void>>]
Contributions are welcome.
atomsWithSubscription creates two atoms with a mutation. It internally usesclient.subscribe.
import{useAtom}from'jotai'import{ApolloClient,gql}from'@apollo/client'import{atomsWithSubscription}from'jotai-apollo'constclient=newApolloClient({ ...})constsubscription=gql` subscription Count { getCount { count } }`const[countAtom,countStatusAtom]=atomsWithSubscription((get)=>({query:subscription}),()=>client)constApp=()=>{const[data]=useAtom(countAtom)return<div>{JSON.stringify(data)}</div>}
type:
exportfunctionatomsWithSubscription<Data,Variablesextendsobject=OperationVariables>(getArgs:(get:Getter)=>SubscriptionOptions<Variables,Data>,getClient:(get:Getter)=>ApolloClient<any>=(get)=>get(clientAtom)):readonly[dataAtom:WritableAtom<Data,Action>,statusAtom:WritableAtom<SubscriptionResult<Data,Variables>,Action>]
Contributions are welcome.
If you have found what you think is a bug/feature, pleasefile an issue.
For questions around this integration, preferstarting a discussion.
About
Apollo graphql client integration for jotai 🚀 👻
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published