Nicotine Powered Man

    jotai-apollo
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    Jotai Apollo 🚀👻

    Install

    You have to install @apollo/client and jotai to access this bundle and its functions.

    yarn add jotai @apollo/client graphql
    

    atomWithQuery

    atomWithQuery creates a new atom with a query. It internally uses client.query.

    import { useAtom } from 'jotai'
    import { ApolloClient, gql } from '@apollo/client'
    import { atomWithQuery } from 'jotai-apollo'
    
    const client = new ApolloClient({ ... })
    
    const query = gql`
      query Count {
        getCount {
          count
        }
      }
    `
    
    const countAtom = atomWithQuery(
      (get) => ({
        query
      }),
      () => client, // optional
    )
    
    const App = () => {
      const [{ data }] = useAtom(countAtom)
      return <div>{JSON.stringify(data)}</div>
    }

    Examples

    TODO

    atomWithMutation

    atomWithMutation creates a new atom with a mutation. It internally uses client.mutate.

    import { useAtom } from 'jotai'
    import { ApolloClient, gql } from '@apollo/client'
    import { atomWithMutation } from 'jotai-apollo'
    
    const client = new ApolloClient({ ... })
    
    const mutation = gql`
      mutation Count {
        setCount {
          count
        }
      }
    `
    
    const countAtom = atomWithMutation(
      (get) => ({
        mutation
      }),
      () => client,
    )
    
    const App = () => {
      const [{ data }, mutate] = useAtom(countAtom)
      return <div>{JSON.stringify(data)} <button onClick={mutate}>Click me</button></div>
    }

    Examples

    TODO

    atomWithSubscription

    atomWithSubscription creates a new atom with a mutation. It internally uses client.subscribe.

    import { useAtom } from 'jotai'
    import { ApolloClient, gql } from '@apollo/client'
    import { atomWithSubscription } from 'jotai-apollo'
    
    const client = new ApolloClient({ ... })
    
    const subscription = gql`
      subscription Count {
        getCount {
          count
        }
      }
    `
    
    const countAtom = atomWithSubscription(
      (get) => ({
        query: subscription
      }),
      () => client
    )
    
    const App = () => {
      const [{ data }] = useAtom(countAtom)
      return <div>{JSON.stringify(data)}</div>
    }

    Examples

    TODO

    Keywords

    none

    Install

    npm i jotai-apollo

    DownloadsWeekly Downloads

    54

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    1.11 MB

    Total Files

    301

    Last publish

    Collaborators

    • aslemammad