Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

jotai-apollo

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jotai-apollo

[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/poimandres)

  • 0.2.1
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
412
increased by21.18%
Maintainers
1
Weekly downloads
 
Created
Source

Jotai Apollo 🚀👻

Discord Shield

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.

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 <div>{JSON.stringify(data)}</div>
}

type:

export const atomsWithQuery = <
  Data,
  Variables extends object = 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>
]

Examples

Rick & Morty characters

atomsWithMutation

atomsWithMutation creates two atoms with a mutation. It internally uses client.mutate.

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 <div>{JSON.stringify(data)} <button onClick={mutate}>Click me</button></div>
}

type:

export function atomsWithMutation<
  Data = any,
  Variables = OperationVariables,
  Context = DefaultContext,
  Extensions = Record<string, any>,
  Result extends FetchResult<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>
  >
]

Examples

Contributions are welcome.

atomsWithSubscription

atomsWithSubscription creates two atoms with a mutation. It internally uses client.subscribe.

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 <div>{JSON.stringify(data)}</div>
}

type:

export function atomsWithSubscription<
  Data,
  Variables extends object = 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>
]

Examples

Contributions are welcome.

Contributing

If you have found what you think is a bug/feature, please file an issue.

For questions around this integration, prefer starting a discussion.

FAQs

Package last updated on 18 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc