In React, is there a way to get composition for queries which take variables?

[tonyketcham]

For static queries which don't rely on variables at runtime, it's possible to use prepareQuery to get compositional usage of a query across component boundaries.

However, if I have a query which takes a runtime argument known by a React component, such as fetching posts by a particular userId, and wish to use or refetch that query in multiple components (even just in a parent component and its children), prepareQuery does not seem to be a viable option. Is there a pattern for creating one shared query reference which can do this? Perhaps stored in a shared context?

Attempting to pass a const query = useQuery(...) instance across component boundaries as a prop seems to break the reference and does not work for triggering refetches, etc.

[tonyketcham]

I tried wrapping the prepareQuery in a factory function, and placing that inside of a React Context to no avail:

function preparePostsByUserQuery(userId: string) {
  const { preload, refetch, usePrepared, callback } = prepareQuery((query: Query) =>
    query.posts({
      where: createdBy: {
        equals: userId,
      },
    }),
  );

  return {
    preload,
    refetch,
    usePrepared,
    callback,
  };
}

const PostsQueryContext = createContext<ReturnType<typeof preparePostsByUserQuery> | null>(null);

function PostsQueryProvider({ userId, children }: { userId: string; children: React.ReactNode }) {
  const postsQuery = preparePostsByUserQuery(userId);

  console.log(postsQuery);  // this always prints {preload: undefined, refetch: undefined, usePrepared: undefined, callback: undefined}

  const value = useMemo(() => postsQuery, [projectsQuery]);

  return <PostsQueryContext.Provider value={value}>{children}</PostsQueryContext.Provider>;
}

Then using inside of a component with optional chaining in case GQty is returning undefined on the first pass still strictly returns undefined data:

  const postsQuery = useContext(PostsQueryContext);

  const query = postsQuery?.usePrepared?.();
  console.log({ query }); // this prints {query: undefined}

[vicary]

It sounds like a runtime value to me. Would you elaborate more on what you want to achieve?

Speaking with my knowledge, there are a few common practices at the moment:

1. Module level pre-fetching

If you want to fetch in a Render as you fetch pattern following our prepareQuery() example, you apply inputs (e.g. userId) at build time. You may export a component factory instead, but that behaves just like normal useQuery() in many ways.

2. Remix-style

Remix and Next 13 let's you export a data loader for server-side. You use normal useQuery() for data fetching.

3. Server Components

The whole component could be rendered server side, depending on whether you support client-side interactions you have the choice of Astro, Fresh, and Next 13. You use normal useQuery() for these.