Skip to content

feat: Working prototype of deferred queries, but with an annoying caveat #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from

Conversation

imp-dance
Copy link
Collaborator

You need to call the deferred queries after the queries you don't need to defer in the queries argument for it to work as expected.

Example:

const loader = createLoader({
  queries: () => {
    // Queries that are not deferred should be called first
    const notDeferred = useGetPokemonsQuery(undefined);
    // Queries that are deferred should be called last
    const deferred = useGetPokemonByNameQuery("charizard");  // 100ms slower than useGetPokemonsQuery
    
    // The order returned does not matter 
    return [
      deferred,
      notDeferred,
    ] as const;
  },
  deferred: (assignFallback) => [
    assignFallback({ name: "temp-charizard" }), // queries[0]
    undefined, // queries[1]
  ],
  onLoading: () => <div>Loading</div>,
});

This would work like this:

  1. Loading is visible while loader is loading essential queries (that are not deferred). This this case, the loader is waiting for useGetPokemonsQuery.
  2. Since useGetPokemonByNameQuery is slower, we are giving it a fallback value in the deferred argument. This value will be passed to the component while the loader is waiting for the query to resolve in the background.
  3. Once useGetPokemonByNameQuery resolves, the component will again rerender with the updated loader data.

In the example above, we don't technically need the second entry in the deferred array, since deferred[1] would be undefined either way, but this of course depends on the order of the queries returned and isn't always applicable.

I'm thinking of merging this as is, so it'll be included in the next release. It's not perfect, but it's atleast something. You could always "defer" queries by not including them in the loader at all, and just calling them in the component body instead. This atleast opens up the option.

…eat; you need to call the deferred queries _after_ the queries you don't need to defer in the queries argument for it to work as expected.
@imp-dance
Copy link
Collaborator Author

Closing this on account of PR #8

@imp-dance imp-dance closed this Jan 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant