New to KendoReact? Start a free 30-day trial

Third-Party Library Integration
Premium

The KendoReact DataSource hooks can be seamlessly integrated with popular data fetching libraries. This guide demonstrates integration patterns with TanStack Query (formerly React Query) and SWR:

Integration with TanStack Query
Integration with SWR

Key Integration Points

When integrating with third-party data fetching libraries, consider these key points:

Initialize Reads Collection: Set the reads property of useRemoteDataSource with the data from your third-party library to ensure the DataSource starts with the correct initial state.
Cache Management: Use the onSuccess callbacks in the transport configuration to update the third-party library's cache.
Loading States: Leverage the third-party library's loading states (isFetching, isLoading) for better UX.
Cache Invalidation: Consider when to invalidate or revalidate the cache:
- TanStack Query: Use queryClient.invalidateQueries()
- SWR: Use mutate() with the revalidate flag

Here's how these points work together:

The third-party library fetches the initial data
The reads collection is initialized with this data
Transport operations update both the DataSource and the third-party cache
Loading states are synchronized between both libraries

Integration with TanStack Query

TanStack Query provides powerful tools for managing, caching, and synchronizing server state. Here's how to integrate it with useRemoteDataSource:

tsx

const queryClient = new QueryClient();

const { data, isFetching } = useQuery({
    queryKey: ['posts'],
    queryFn: () => dataSource.read()
});

const dataSource = useRemoteDataSource<Post>({
    // Initialize reads collection from TanStack Query data
    reads: data?.reduce((acc, item) => {
        acc.set(item.id!, item);
        return acc;
    }, new Map<number, Post>()),
    transport: {
        read: {
            url: 'https://api.example.com/posts',
            onSuccess: (data) => {
                queryClient.setQueryData(['posts'], data);
                return data;
            }
        },
        update: {
            onSuccess: (dataItem) => {
                queryClient.setQueryData(['posts'], dataSource.data);
                return dataItem;
            }
        }
    }
});

Here's a complete example showing all CRUD operations with TanStack Query integration:

Change Theme

Theme

Loading ...

Integration with SWR

SWR is a React Hooks library for data fetching that provides features like caching, revalidation, and real-time updates. Here's how to integrate it with useRemoteDataSource:

tsx

const { data, isLoading } = useSWR('posts', fetcher);

const dataSource = useRemoteDataSource<Post>({
    // Initialize reads collection from SWR data
    reads: data?.reduce((acc, item) => {
        acc.set(item.id!, item);
        return acc;
    }, new Map<number, Post>()),
    transport: {
        read: {
            url: 'https://api.example.com/posts',
            onSuccess: (data) => {
                mutate('posts', data, false);
                return data;
            }
        },
        update: {
            onSuccess: (dataItem) => {
                mutate('posts', dataSource.data, false);
                return dataItem;
            }
        }
    }
});

Here's a complete example showing all CRUD operations with SWR integration: