How do you "Start Fetching Early"?

If data fetching is happening in a selector, how would you kick off the request early - like in this example from the Suspense docs.

// First fetch: as soon as possible
const initialResource = fetchProfileData(0);

function App() {
  const [resource, setResource] = useState(initialResource);
  return (
    <>
      <button onClick={() => {
        const nextUserId = getNextId(resource.userId);
        // Next fetch: when the user clicks
        setResource(fetchProfileData(nextUserId));
      }}>
        Next
      </button>
      <ProfilePage resource={resource} />
    </>
  );
}

[drarmstr]

The Suspense docs provide this example:

// Start fetching early!
const resource = fetchProfileData();

// ...

function ProfileDetails() {
  // Try to read user info
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

Selectors follow a similar convention as components for Suspense. I haven’t tried this example with an outside source like this yet, but it should work. Let me know!

const resource = fetchProfileData();

const userNameQuery = selector({
  key: 'UserNameQuery',
  get: () = {
    const user = resource.user.read();
    return user.name;
  },
});

Or, you can just await on a pending pre-fetched promise:

const userPromise = fetchUser();

const userNameQuery = selector({
  key: 'UserNameQuery',
  get: async () = {
    const user = await userPromise;
    return user.name;
  },
});

You can use selectorFamily() to parameterize the selector. But, note that promises and functions don’t work well in parameters, so you’d want to use an id or handle to reference it.

If you want to do everything with just selectors, you can do that also by using useRecoilValueLoadable() because it does not block the rendering while the query is still loading.

const userNameQuery = selector({
  key: 'UserNameQuery',
  get: async () => {
    const user = await fetchUser();
    return user.name;
  },
});

function ProfilePage() {
  useRecoilValueLoadable(userNameQuery);  // initiate pre-fetch

  // Stat rendering while fetch was started
  return (
    <Suspense>
      <ProfileDetails />
    </Suspense>
  );
}

function ProfileDetails() {
  const userName = useRecoilValue(userNameQuery);
  return <h1>{userName}</h1>;
} 

[morgs32]

Nice! So something like this? Seems pretty slick.

// userQuery.js
import getUser from 'getUser'
const userQuery = selectorFamily({
  key: 'UserNameQuery',
  get: async (userId) = {
    const user = await getUser(userId);
    return user;
  },
});

// App.js
import userQuery from './userQuery'
function App() {

  const earlyGetUser = useRecoilCallback(async ({getLoadable}, userId) => {
     getLoadable(userQuery(userId))
  });

  return (
    <UserPicture 
        onClick={(userId) => {
           earlyGetUser(userId)
           goToRoute('profile', { userId })
        }}
     />
  );
}