Best practices for handling normalized data and preventing duplication across multiple infinite queries

[ialwayswatching]

I am working on React Native App, I have multiple infinite queries fetching posts from different feeds (feed, user feed, etc.). Each post contains nested data about communities, participants, and other entities that get duplicated across these feeds.

Current setup:

• Each feed query returns posts with full nested data
• Same communities/participants data gets duplicated in memory across different feeds
• Updating shared entities requires updating multiple query caches
• Memory usage grows significantly with feed size

I can't invalidate all feeds because of losing scroll history

Example response structure:

interface FeedResponse {
  posts: Array<{
    id: string
    content: string
    community: Community // duplicated across feeds
    participants: Participant[] // duplicated across feeds
  }>
  cursor: string
}

I'm looking for recommended patterns to:

Normalize this data structure
Share entities between queries
Update shared entities efficiently
Avoid memory duplication

Has anyone implemented something like Redux Toolkit's EntityAdapter pattern with React Query? Or what's the recommended approach for this use case?

Here is my theoretical example of how it could work, what i've got while working with AI, Will it work as expected?

// Separate entities into normalized state
interface NormalizedState {
 participants: Record<string, ParticipantByIdResponse['participants']>;
 channels: Record<string, ChannelShortByIdResponse['channels']>;
 communityCounts: Record<string, ChannelSubscribersCountResponse['channel_subscribers']>;
 messages: Record<string, MessageBodyResponse>;
}

// Separate queryKeys for each data type
export const queryKeys = {
 participants: (ids: string[]) => ['participants', ids],
 channels: (ids: string[]) => ['channels', ids],
 communityCounts: (ids: string[]) => ['communityCounts', ids],
 feed: (type: FeedListType, id: string, params?: object) => ['feed', type, id, params],
} as const;

// Hooks for fetching shared data
const useParticipants = (ids: string[]) => {
 return useQuery({
   queryKey: queryKeys.participants(ids),
   queryFn: () => getParticipantsById(ids),
   staleTime: 5 * 60 * 1000, // Cache for 5 minutes
 });
};

const useChannels = (ids: string[]) => {
 return useQuery({
   queryKey: queryKeys.channels(ids),
   queryFn: () => getCommunityById(ids),
   staleTime: 5 * 60 * 1000,
 });
};

// Optimized feed hook
export const useFeed = (feedId: string, dispatch: Dispatch, params?: { type?: string }) => {
 const queryClient = useQueryClient();

 return useInfiniteQuery({
   queryKey: queryKeys.feed(FeedListType.DEFAULT, feedId, params),
   queryFn: async ({ pageParam }) => {
     const feedResponse = await apiClientService.request({
       url: `v1/feed/${feedId}`,
       method: 'get',
       params: { cursor: pageParam, limit: 10, ...params },
     }) as FeedResponse;

     const [participantIds, parentIds] = extractParticipantIdsAndParentChannelIds(
       feedResponse.channels
     );

     // Check cache first
     const cachedParticipants = queryClient.getQueryData(queryKeys.participants(participantIds));
     const cachedChannels = queryClient.getQueryData(queryKeys.channels(parentIds));

     // Fetch only missing data
     const [participantsResponse, channelsResponse] = await Promise.all([
       !cachedParticipants && participantIds.length > 0 
         ? getParticipantsById(participantIds)
         : cachedParticipants,
       !cachedChannels && parentIds.length > 0
         ? getCommunityById(parentIds)
         : cachedChannels,
     ]);

     // Update related data cache
     if (participantsResponse) {
       queryClient.setQueryData(
         queryKeys.participants(participantIds),
         participantsResponse
       );
     }

     if (channelsResponse) {
       queryClient.setQueryData(
         queryKeys.channels(parentIds),
         channelsResponse
       );
     }

     // Return only IDs and minimal required data
     return {
       postIds: feedResponse.channels.map(channel => channel.id),
       participantIds,
       channelIds: parentIds,
       cursor: feedResponse.cursor,
     };
   },
   initialPageParam: null,
   getNextPageParam: (lastPage) => lastPage.cursor ?? null,
 });
};

// Post component with optimized data loading
const PostItem = ({ postId }: { postId: string }) => {
 const post = usePost(postId);
 const participant = useParticipants([post.participantId]);
 const channel = useChannels([post.channelId]);

 if (!post || !participant || !channel) return null;

 return (
   <View>
     {/* Post render */}
   </View>
 );
};

// Optimized list component
const FeedList = () => {
 const { data, fetchNextPage } = useFeed(feedId, dispatch);
 
 const postIds = useMemo(() => 
   data?.pages.flatMap(page => page.postIds) ?? [], 
   [data]
 );

 return (
   <FlashList
     data={postIds}
     renderItem={({ item: postId }) => <PostItem postId={postId} />}
     onEndReached={fetchNextPage}
     estimatedItemSize={100}
   />
 );
};

[nftorres]

Tengo el mismo problema, ya encontraste una solución?

[ialwayswatching]

The solution: use RQ only for fetching and store all the data into RTK with Entity Adapter, because RQ doesn't have any tool for smooth data placing