Pass url param to react-query integration

[lwhiteley]

Was reading some resources related to the repository around using a param to make a request but would like to know if there is any recipe for doing this with the react query plugin?

Reading references so far:
#68
https://codesandbox.io/s/jotai-query-hacker-news-u4sli?from-embed=&file=/src/App.tsx:1057-1064

the idea around what i want to achieve is to trigger a query doing the following

import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { Provider, atom, useAtom } from 'jotai';
import { useAtomValue, useUpdateAtom } from 'jotai/utils';
import { atomWithQuery } from 'jotai/query';

const setting = atomWithQuery((get) => ({
// id should be an input somehow
  ...buildQueryConfig({ id }),
}));

const fetchAtom = atom(
  // unclear what should go here
);

export const Component = () => {
  const { id } = useParams();
  const [data, fetch] = useAtom(fetchAtom);

  useEffect(() => {
    fetch(id);
  }, []);


  return (
    <>
     something to display
    </>
  );
};

Is this the right track or is there a better way? Also advice on the unclear parts would be nice

Thanks

[dai-shi]

Hey, thanks for asking.
Assuming you want to globally define the atom with RQ, here's what I have in mind.

const idAtom = atom(null)

const dataAtom = atomWithQuery((get) => {
  const id = get(idAtom)
  if (id === null) {
    return ... // OOPS: there's no way to stop initialization...
  }
  return buildQueryConfig({ id })
})

export const Component = ({ id }) => {
  const setId = useUpdateAtom(idAtom)
  useEffect(() => {
    setId(id)
  }, [setId, id])
  return <>something to display</>
}

So, there's a missing feature in atomWithQuery. Otherwise, we'd need to wrap with another atom, which is too complicated for app code.

@Aslemammad any other idea?

[dai-shi]

@lwhiteley Can you help me by creating a minimal reproduction of the bug in codesandbox with atomWithQuery without react-router?

[lwhiteley]

Yep I'll send it to you later when I get some time

[lwhiteley]

Hi @dai-shi

Here is a simple reproduction to showcase the issue.

https://codesandbox.io/s/jotai-query-hacker-news-forked-xmf0z?file=/src/App.tsx

First click hide and then show, here you will see the atom gets stuck

[dai-shi]

https://codesandbox.io/s/jotai-query-hacker-news-forked-3h5vg
Thanks. I slimmed it a little more. I'm investigating it now.

(update: i'm struggling with it. there must be something fundamental. creating various tests.)

[lwhiteley]

hmm interesting. Let me know if you make any strides

[lwhiteley]

As a side note, I started looking into jotai as a way to manage a client heavy state component for an app that already uses react-query.

What interested me was the react-query integration and also the recipe for managing large objects. it is pretty neat

With that i had to ensure that only one query client was being used so this is what i did

import React, { useEffect } from 'react';
import { QueryClientProvider, QueryClient } from 'react-query';
import { queryClientAtom } from 'jotai/query';
import { useUpdateAtom } from 'jotai/utils';

const queryClient = new QueryClient();

export const JotaiQueryProvider = ({ children }) => {
  const setQueryClient = useUpdateAtom(queryClientAtom);

  useEffect(() => {
    setQueryClient(queryClient);
  }, [setQueryClient]);

  return (
    <>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </>
  );
};

May be helpful for someone else i guess

[lwhiteley]

Sorry for late follow up but yes!! it works as expected 🚀 .

sanbox: https://codesandbox.io/s/jotai-query-hacker-news-forked-s79go?file=/src/App.tsx

Thanks for getting this resolved so quickly 👍🏾

is there more cleanup to do and when will this be released?

[dai-shi]

It's already released, but I'll cut another release soon and that includes some refactoring to this.

[dai-shi]

Published: https://www.npmjs.com/package/jotai/v/0.16.10

[dai-shi]

It's already released

it was wrong. v0.16.10 is the first version that has the fix.

[lwhiteley]

Cool thanks

[aulneau]

This might be helpful! #535