# Loading data from REST + GraphQL Three shapes. Pick the one that matches your back-end; the grid doesn't care which. ## REST: fetch on mount The examples on this page run against these rows: ```svelte ``` ```svelte ``` The grid's `loading` + `error` props render a built-in overlay; you don't need to gate the `` mount. ## REST: server-side sort / filter / page When the dataset is bigger than ~10k rows, push sort + filter to the server and use `externalSort` / `externalFilter`: ```svelte { data = await fetchPage({ sort: clauses }) }} onFiltersChange={async (f) => { data = await fetchPage({ filters: f.columns }) }} /> ``` See [server-side filter with TanStack Query](https://svgrid.com/docs/recipes/server-side-filter-with-tanstack-query/) for cancellation, debounce, and request dedup. ## GraphQL Same shape, different transport. The grid still receives a flat array; the GraphQL layer is just how you obtain it. ```ts import { request, gql } from 'graphql-request' async function fetchOrders(vars: { page: number; sort?: string; filter?: object }) { const q = gql` query Orders($page: Int!, $sort: String, $filter: OrderFilter) { orders(page: $page, sort: $sort, filter: $filter) { items { id company product sellDate quantity price country } total } } ` return request('/graphql', q, vars) } ``` Live in [demo 72 (GraphQL adapter)](https://svgrid.com/demos/72-graphql-adapter/) - includes a side panel showing the generated GraphQL document. ## More examples ### Loading from REST Fetches rows from a public REST API with loading skeleton, retry, error surface, and a Reload button. > Live demo: Loading from REST - https://svgrid.com/demos/79-loading-from-rest/ ## See also - [Server-side data](https://svgrid.com/docs/help/server-side-data/) - [Server-side filter with TanStack Query](https://svgrid.com/docs/recipes/server-side-filter-with-tanstack-query/) - [Cursor-based infinite scroll](https://svgrid.com/docs/recipes/cursor-based-infinite-scroll/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/recipes/loading-data/ . All docs: https://svgrid.com/llms.txt