Any tips for Recoil with SSR(Next.js)?

[jiwoo-choi]

I'm using Next.js, and I pre-fetched and initialized api data using RecoilRoot's initializeState props.

<RecoilRoot initializeState={initializeState}>

The problem is that it is very tricky to use with selector.

For Example:

export const dataState = selector({
  key: "dataState",
  get: async ({ get }) => {
    const dataState = get(prefetchedAtomState);
    // 1. I got prefetchedAtomState first time from ssr, how could I avoid first fetch on mount?
    // 2. also, how to refresh this selector properly to trigger re-fetch the API.
    return dataState ?? await fetchData() 
  },
});

// reference : https://github.com/facebookexperimental/Recoil/discussions/1675

Are there alternatives or tips for this case?

[tpatalas]

Why don't you use Atom Effect if you want to refetch the data? I personally think fetching through Atom Effect is much powerful than just using selector (which is one way data flow, read-only).

https://recoiljs.org/docs/guides/atom-effects

[jiwoo-choi]

Hello! thanks for replying! @tpatalas

Personally, I also agree with your argument that atom effects are better than selectors, but, I'm not sure using the atom effects are a proper solution to my case.

How could I 'refetch' API again inside of the effect hooks?
For example, setSelf only allows promise at initialization time only ([email protected]).

  setSelf: (
    | T
    | DefaultValue
    | Promise<T | DefaultValue> // Only allowed for initialization at this time
    | WrappedValue<T>
    | ((T | DefaultValue) => T | DefaultValue),
  ) => void,
* reference : https://recoiljs.org/docs/guides/atom-effects/

So, my code below never works because of the limitation of atom effects' setSelf([email protected])

const test = atom({
  key: "test",
  default: { state: "init" },
  effects: [
    ({ onSet, setSelf }) => {
      onSet(() => {
        setSelf(new Promise((resolve) => {
          setTimeout(() => {
            resolve({ state: "done!" });
          }, 1000);
        });
      }))
    }
  ]

// Error: Setting atoms to async values is not implemented. 

Would you share any tips or workarounds for this case If you know any?

[tpatalas]

Hi,

I don't know your data-flow structure, but It seems the Error messages tells what is wrong. I think you should set the async value before onSet first then you can use it again to refetch the data.

I personally like to create and separate the Atom Effect, and reuse it again.

Below is just example for general purpose:

export const queryEffect: TypesRefetchEffect =
  ({ queryFunction, ...props }) =>
  ({ setSelf, onSet, trigger }) => {
    if (typeof window === 'undefined' || typeof queryFunction === 'undefined')
      return;

    const queryInitial = async () => {
      const { data }: never = await queryFunction();
      return data;
    };

    const queryData = async () => {
      const { data }: never = await queryFunction();
      setSelf(data);
    };
    // asynchronous setSelf fetch: queryData will always bypass the Suspense if default value is provided. Suspense will on the other hands be triggered if there is no DefaultValue in the atom/atomFamily.

    if (trigger === 'get')
      props.queryWithoutSuspense ? queryData() : setSelf(queryInitial());


    onSet((newValue) => {
      if (newValue && props.refetchOnMutation) {
        const timeoutID = setTimeout(
          () => {
            queryData();
          },
          props.refetchDelayOnMutation ? props.refetchDelayOnMutation : 100
        );
        return () => clearTimeout(timeoutID);
      }
    });
// I think refetchDelay is quite useless so you can get rid of it if you want to 

.
.
....

Then you can use it to Atom/AtomFamily Something like this:

export const getIds = async () => (await fetch('/api/v1/ids')).json();
export const getItem = async (id) => (await fetch(`/api/v1/ids/${id}`)).json();

export const atomFetchIds = atom({
  key: 'atomFetchIds',
  effects: [
    queryEffect({
      queryFunction: () => getIds(),
      refetchOnMutation: true,
    }),
  ],
});

or

export const atomFetchItem = atomFamily({
  key: 'atomFetchItem',
    effects: (id) => [
    queryEffect({
      queryFunction: () => getItem(id),
      queryWithoutSuspense: false,
      refetchOnMutation: false,
    }),
  ],
});

You may notice I have not setup default value. Atom/AtomFamily will be in pending state until data is available.

As shown, I created queryEffect separated with some options like:

queryWithoutSuspense,
  refetchOnMutation,
  refetchDelayOnMutation,
  refetchOnFocus,
  refetchOnBlur,
  refetchInterval,.

Plus, you can also apply selectively fetch Item by passing parameter.

Because every application differs the way to fetch items, the atom effect structure will be different by application. The above is one of examples.

Now if you set one of the atom shown above, the atom Effect will run and refetch data. The beauty of atom effect is whenever you set to new value, It optimistically update it on the client-side without triggering suspense then refetch and replace with fresh data without loading spinner. So more like react-query style. You can also do opposite way.

[jiwoo-choi]

I appreciate your help and explanation :) It helped me a lot!

I made a subtle change and a custom hooks based on your work to offer react-query-like functionality.

1. Adding fetchOnMount field to your queryEffects in order to avoid fetching on mount if you have done pre-fetching data from the server.

export const queryEffect: TypesRefetchEffect =
  ({ queryFunction, ...props }) =>
  ({ setSelf, onSet, trigger }) => {
    
    // … 

    if (trigger === 'get' && props.fetchOnMount === true)
      props.queryWithoutSuspense ? queryData() : setSelf(queryInitial());
   // … 

   }

export const atomFetchIds = atom({
  key: 'atomFetchIds',
  effects: [
    queryEffect({ 
      //...//
      fetchOnMount: false // this option makes atom not trigger suspense on mount
      //...//
    }),
  ],
});

2. Adding custom hooks to offer isFetching, invalidateQuery, and removeQuery

function useRecoilQuery(atom, queryFn) {
  const data = useRecoilValue(atom);
  const refresher = useSetRecoilState(atom);
  const force_refresher = useResetRecoilState(atom);

  return {
    data: { data: data },
    isFetching: data.__isFetching__,
    invalidateQuery: () => refresher({ ...data, __isFetching__: true }),
    removeQuery: () => {
       // this func works properly if and only if there's no default value in atom.
        force_refresher();
        queryFn().then((data) => {
             refresher({ data: data, __isFetching__: false })
        })
    }
  };
}

I also would be very appreciated if anyone would share better ideas to implement those ideas above!

Thx! 👍