apollo async atom

[mzalevski]

Hi, I'd love to get some advice on the following:

I have a global atom for the logged in user:

export const currentUserAtom = atom<MeQuery["me"]>(null);

the data is fetched after login:

const [, setCurrentUser] = useAtom(currentUserAtom);
const { data, error } = useMeQuery();

useEffect(() => {
  setCurrentUser(data.me);
}, [data]);

I'd like to incorporate the fetching logic into the currentUserAtom using async atom (https://jotai.org/docs/basics/async).

I'm not sure how to get this right. The docs are not sufficient for me.

I tried something like this:

export const currentUserAtom = atom(async () => {
  const client = useApolloClient();
  const { data } = await client.query<MeQuery>({ query: MeDocument });
  return data.me;
});

but it loads forever (suspense fallback is not showing) and I'm not even using the get function, because there is no other atom I can pass to it. I tried separating a promise atom to then use the get function on it, but it didn't work and felt wrong.

[dai-shi]

Hi! Thanks for using the lib.
Atom logic is outside React, so you can't use hooks in get function.
(Though, I wonder how it causes an infinite loop...)

Hope @Aslemammad can help on this specific problem with Apollo as he developed jotai-apollo.

[Aslemammad]

@mzalevski Could you share a reproduction so I can help you with that?

[mzalevski]

@Aslemammad sure, I will share the repo in a moment. thanks :)

[mzalevski]

@Aslemammad https://github.com/mzalevski/jotai-apollo

[Aslemammad]

Here's a demonstration, please try cleaning it, I just wanted to give you an idea, if you give an atom a promise, jotai will suspend and handle it for you, so you should wrap your Components with Suspense!

// hooks.ts
import { ApolloQueryResult, gql } from "@apollo/client";
import { useAtomCallback } from "jotai/utils";
import { useEffect, useState } from "react";
import { client } from "./App";
import { currentCountryAtom } from "./atoms";
import { Country } from "./types";

export const useGetCurrentCountry = () => {
  const [promise, setPromise] = useState<any>(null);

  const setResult = useAtomCallback((_, set) => {
    set(currentCountryAtom, promise);
  });

  const query = gql`
    query {
      country(code: "PL") {
        code
        name
      }
    }
  `;
  
  // changing state using useEffect is not ideal, keep that in mind!
  useEffect(() => {
    setPromise(
      client
        .query({ query })
        .then(
          (resp: ApolloQueryResult<{ country: Country }>) => resp.data?.country
        )
    );
  }, [client]);

  useEffect(() => {
    setResult();
  }, [promise]);
};

// App.tsx
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
import { HomePage } from "./components/home-page";
import { OtherPage } from "./components/other-page";
import { Wrapper } from "./components/wrapper";
import { Suspense } from "react";

export const client = new ApolloClient({
  uri: "https://countries.trevorblades.com",
  cache: new InMemoryCache(),
});

export const App = () => (
  <ApolloProvider client={client}>
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Wrapper>
          <Routes>
            <Route index element={<HomePage />} />
            <Route path="other" element={<OtherPage />} />
          </Routes>
        </Wrapper>
      </Suspense>
    </BrowserRouter>
  </ApolloProvider>
);

[Aslemammad]

if you want to do it without hooks, see this.
There, the atom does not suspend, because I don't give it a promise, but if you want it to suspend, create similar atom, and give the client query promise to an atom that you want to use!

[mzalevski]

ok, thanks to 2 insights:

1. Atom logic is outside React, so you can't use hooks in get function.
2. if you give an atom a promise, jotai will suspend and handle it for you

I figured it out. see: https://github.com/mzalevski/jotai-apollo

export const currentCountryAtom = atom<Promise<Country>>((get) => {
  return get(clientAtom)
    .query<{ country: Country }>({ query: COUNTRY })
    .then((result) => result.data.country);
});

thanks @dai-shi @Aslemammad