best practice to set atom value with route params

[lili21]

Image a simple list-detail application like upon. and I want to use the async atom to store the detailed data.

this is my atom

const itemIdAtom = atom(''); // how to set it with useParams()

const detailAtom = atom(async get => {
  const id = get(itemIdAtom);
  const data = await fakeFetchDetail(id);
  return data
})

my first temp is <Provider initialValues={} />, but it won't change the id after navigation.

now I end up with atomFamily:

const detailAtom = atomFamily(id => (async get => {
  const data = await fakeFetchDetail(id);
  return data
}))

another option in my mind is to set it manually

function Detail() {
  const { itemId } = useParams();
  const [set] = useAtom(itemIdAtom);
  set(itemId);
  const detailData = useAtom(detailAtom);

  return <div>...detail data...</div>
}

but I guess the async atom won't work as expect.

any other ideas? and what is the best practice?

[lili21]

I guess I can create a derived atom, and get the id from url by myself.

const itemIdAtom = atom(() => {
  // get id from url - can't call `useParams` - nested hooks
  return id;
}); 

[dai-shi]

Hi, thanks for opening a discussion.
I believe this is still an open field for best practices. #485 is one discussion for nextjs.
Do you use react-router, or something else?

[lili21]

I'm using react-router.

[lili21]

I tried the derived atom way, but It didn't work out.

const itemIdAtom = atom(() => {
  const match = /detail\/(.*)\//.test(location.pathname)

  return match[1]
})

const getDetailAtom = atomWithDefault(async (get) => {
  const id = get(itemIdAtom)
  const data = await fakeFetch(id)
  return data
})

looks like the getDetailAtom be cached, event the id changed, it doesn't refetch the new data.

am I doing something wrong here ?

[dai-shi]

When you create a derived atom without dependencies,

const derivedAtom = atom(() => 'foo');

The function will never be re-evaluated, because no dependencies are changed.

---

One solution (which I'm still not sure if it's best practice) is to use onMount.

const locationAtom = atom(null);
locationAtom.onMount = (set) => {
  const callback = (arg) => {
    set(arg.location);
  };
  const unlisten = history.listen(callback);
  callback(history);
  return unlisten;
};

[nadaru-fr]

I came up with this (this is the component that is attached to your <Route />)

export const currentEntityIdAtom = atom<string | null>(null)

export function MyRoute() {
  const { id } = useParams()
  const [entityId, setEntityId] = useAtom(currentEntityIdAtom)

  useEffect(() => {
    setEntityId(id)
    return () => setEntityId(null)
  }, [id]);

  if (entityId !== id) return null

  return <Component />
}

[imjuni]

I think that useParams or useSearchParams function function cannot use inside of readable or writable atom. If you use useParams or useSearchParams call inside readable atom, React warn about invalid usage of hooks like that,

react-dom.development.js:86 Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function. For more information, see https://reactjs.org/link/rules-of-hooks

useEffect is good approach but I want to use React.Suspense so I determine found another approach. I think that Developer choose MemoryRouter or use path parameter(eg. connections/:id) those must need useParams or useSearchParams hooks. I see #691 and I found walkaround this problem.

const OuterComponent: React.FC = () => {
  const [searchParams] = useSearchParams();
  const onWriteQs= useUpdateAtom(searchQsAtom);
  const page = Number.parseInt(searchParams.get('page') ?? '1', 10);
  const size = Number.parseInt(searchParams.get('size') ?? '10', 10);

  useEffect(() => {
    onWriteQs({ page, size });
  }, [onWriteQs, page, size]);

  return (
    <React.Suspense fallback={<p>loading ...</p>}>
      <InnerComponent />
    </React.Suspense>
  );
}

const InnerComponent: React.FC = () => {
  const asyncFetchDataStore = useAtomValue(asyncFetchDataAtom);
  return (
    <div>{JSON.stringify(asyncFetchData)}</div>
  );
}

// Atom definition
export const qsAtom = atom({ page: 1, size: 10 });

// code from #691 
const baseFetchDataAtom = atom({ total: 0, items: [] });

const INIT = Symbol('for init');

export const asyncFetchDataAtom = atom(
  (get) => get(baseFetchDataAtom),
  (get, set, args) => {
    if (args === INIT) {
      const qs = get(qsAtom);
      const url = new URL('https://pokeapi.co/api/v2/pokemon');
      url.searchParams.set('offset', qs.page - 1 * qs.size);
      url.searchParams.set('limit', qs.size);
      fetch(url.href)
        .then(res => set(baseFetchDataAtom, { total: res.data.count, items: res.data.results })
        .catch() => set(baseFetchDataAtom, { total: 0, items: [] });
    } else {
      set(baseFetchDataAtom, args);
    }
  });

asyncFetchDataAtom .onMount = (dispatch) => {
  dispatch(INIT);
};

Finally, I can use React.Suspense and useParams, useSearchParams. That is important of me because I use Electron + React + React Router that use MemoryRouter (original setting). Thalk :)

[dai-shi]

If you are not using react-router or any other router libs, you could use jotai-location.

[flappyBug]

I just find it very easy with useHydrateAtoms. (yes, not for server side rendering)

function Detail() {
  const { itemId } = useParams();
  useHydrateAtoms([[itemIdAtom, itemId]]);
  const detailData = useAtom(detailAtom);

  return <div>...detail data...</div>
}

[BlakeEriks]

How can this be modified to support changing the itemId? as it will not rehydrate a new value