jotaijs / jotai-apollo Goto Github PK

View Code? Open in Web Editor NEW

49.0 4.0 3.0 116 KB

Apollo graphql client integration for jotai :rocket: :ghost:

License: MIT License

Shell 0.39% TypeScript 99.61%

apollo apollo-client jotai apollo-graphql integration react

jotai-apollo's Introduction

Jotai Apollo 🚀👻

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.

jotai-apollo's People

Contributors

Stargazers

Watchers

Forkers

iwoplaza bpalko-shakudo dsonck92

jotai-apollo's Issues

invaild exports location

in current package.json, the exports point to files that no longer exists:

{
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "types": "./dist/index.d.ts",
      "module": "./dist/index.mjs", <- out of date
      "import": "./dist/index.mjs", <- out of date
      "default": "./dist/index.js" <- out of date
    }
  }
}

the correct exports should be:

{
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "types": "./dist/index.d.ts",
      "module": "./dist/index.js",
      "import": "./dist/index.js",
      "default": "./dist/index.cjs"
    }
  }
}

Suppose, I need to fetch data into ssr getServerSideProps in one page. I need to use that data into any component under this page without passing data as props. Please give a example project with nextjs ssr?

Does `atomsWithQuery` subscribe to apollo store?

I see that atomsWithQuery uses client.query instead of watchQuery. This implies that the atom won't be updated when there's a change in apollo store that would impact the query result (e.g. another query updating the cache with some cache keys in common with this query). Wondering what the rationale is and whether it was intentional.

https://github.com/jotaijs/jotai-apollo/blob/master/src/atomsWithQuery.ts#L37-L40

`atomsWithQuery` optional 2nd parameter isn't optional

Hey, I've tried following the code example shown in the readme but using my own api and queries etc. In the example of atomsWithQuery it says that the: () => client parameter is optional, however removing that parameter causes app to crash and gives this error:
Uncaught ApolloError: Response not successful: Received status code 404

From the docs it looks like the second parameter gets a default client like:
getClient: (get: Getter) => ApolloClient<any> = (get) => get(clientAtom)

But I can't see an example of how to set it up so that the default clientAtom has our graphql client

Using async atoms within an atomsWithQuery call

I have a use case where I need to call a query, but one of the variables to the query relies on an async atom. I can't seem to find a good way to achieve this at the moment. Is this currently possible? I.e

export const [playerAtom] = atomsWithQuery(async get => {
  const playerId = get(playerIdAtom);
  const playerTeams = get(playerTeamsAtom);
  const selectedPlayerMatches = await get(selectedPlayerMatchAtom);

  return {
    query: playerQuery,
    variables: {
      playerId: +playerId!,
      teamIds,
      matchIds,
    },
  };
});

Which gives me an error, I think due to the potential of the playerAtom returning a promise: https://www.apollographql.com/docs/react/errors/#%7B"version"%3A"3.8.5"%2C"message"%3A71%2C"args"%3A%5B%5D%7D

Jotai Apollo: atomsWithQuery within react tree

Hi Mo,

Currently, I'm working with the RedwoodApolloProvider and I'm finding
the use of the useApolloClient hook quite valuable for obtaining the
client. However, I've encountered a situation where I'm uncertain
about the best approach to handle it.

As far as I understand, Redwood doesn't offer a seamless method to
define the client outside of the React tree and then pass it to the
provider. This leads me to call atomsWithQuery from within the React
tree itself (to avoid calling hook for the client from outside the render function), as it requires the client to function properly. I'm
wondering if this pattern is supported or if you have any experience
with it. If so, I would greatly appreciate any insights or examples
you might have.

I've attempted a few methods, such as making a plain call (which
triggered infinite rerendering) and using useMemo (which didn't update
with new data), but I haven't found the ideal solution yet.

Thanks in advance for your assistance

feat: error handling

In jotai, we implement "error handling" recently.

pmndrs/jotai#1239 for jotai/query
pmndrs/jotai#1381 for jotai/urql
https://github.com/jotai-labs/jotai-relay for jotai-relay

jotai-apollo should follow it so that we can recommend it.
I think you want to refer jotai/urql implementation, which is almost the same as jotai-relay.
(jotai/query is very unique/weird implementation, hope to fix it too eventually.)

jotaijs / jotai-apollo Goto Github PK

jotai-apollo's Introduction

Jotai Apollo 🚀👻

Install

atomsWithQuery

Examples

atomsWithMutation

Examples

atomsWithSubscription

Examples

Contributing

jotai-apollo's People

Contributors

Stargazers

Watchers

Forkers

jotai-apollo's Issues

Recommend Projects

Recommend Topics

Recommend Org