Sveltekit Fire

Collection

The Col component fetches data from a Firestore dollection.

Col relies on Cloud Firestore Lite SDK to provide a light and fast access to Firestore collections data.

Fetch data from a collection

<script>
	import { Col } from 'sveltekit-fire';
</script>

<Col
	path={'posts'}
	let:data={posts}
	let:error>
	<!-- yay, the collection has loaded -->
	{#each posts as post}
		<p>{post.title}</p>
	{/each}
</Col>

If Firebase isn't initialized by the time you use Col, it will automatically be initialized based on your .env config

Enable console logs

<script>
	import { Col } from 'sveltekit-fire';
</script>

<Col
	path={'posts'}
	log
	let:data={posts}
	let:error>
	<!-- yay, the collection has loaded -->
	{#each posts as post}
		<p>{post.title}</p>
	{/each}
	<div slot="loading">Loading</div>
	<div slot="fallback">Encontered an error: {error}</div>
</Col>

Loading State

<script>
	import { Col } from 'sveltekit-fire';
</script>

<Col
	path={'posts'}
	log
	let:data={posts}
	let:error>
	<!-- yay, the collection has loaded -->
	{#each posts as post}
		<p>{post.title}</p>
	{/each}
	<div slot="loading">Loading</div>
</Col>

Error Handling

<script>
	import { Col } from 'sveltekit-fire';
</script>

<Col
	path={'posts'}
	log
	let:data={posts}
	let:error>
	<!-- yay, the collection has loaded -->
	{#each posts as post}
		<p>{post.title}</p>
	{/each}
	<div slot="loading">Loading</div>
	<div slot="fallback">Encontered an error: {error}</div>
</Col>

Performing Queries

You can filter data by using Firestore Queries like this: 

<script>
	import { Col } from 'sveltekit-fire';
	import { orderBy, limit } from 'firebase/firestore/lite';
	// remember to import from firestore/lite!

	let query = [orderBy("title", "desc"), limit(10)];
</script>

<Col path={'posts'} log {query} let:data={posts} let:error>
	<!-- yay, the collection has loaded -->
	{#each posts as post}
		<p>{post.title}</p>
	{/each}
	<div slot="loading">Loading</div>
	<div slot="fallback">Encontered an error: {error}</div>
</Col>

Parameters

Col props

Props
Description
path String | Collection Reference
log Display console logs
Default: false
maxWait Number Default: 10000
Timeout to fetch data in ms
query Receives an array of Firestore queries in order to filter data.
Default: null
startWith Initial state for the data variable. Prevents the display of loading state and is usefull for displaying cached content.
Default: undefined
data Variable where the data from the collection is stored
error Variable where the error message is stored if an error occurs

Col slots

Slots
Description
loading Initial state of the component. Is shown before data is fetched or an error occurs
fallback Rendered if an error occurs
default Default slot rendered when collection data is loaded
before Rendered before the collection
after Rendered after the collection

Col events

Events
Description
on:data Dispatched when the collection data has loaded containing it's data
on:ref Dispatched when the collection reference is created, usefull for updates

When you need to access collection that is private to authenticated users, you can use it in inside a User component.

With Realtime Updates

If you need to use Firestore realtime updates and have your page react to updates on a document use ColRealtime instead of Col

It's powered by Firestore's Realtime Updates 

<script>
	import { ColRealtime } from 'sveltekit-fire';
</script>

<ColRealtime
	path={'posts'}
	log
	let:data={posts}
	let:error>
	<!-- 
	yay, the collection has loaded
	and will update automatically 
	-->
	{#each posts as post}
		<p>{post.title}</p>
	{/each}
	<div slot="loading">Loading</div>
	<div slot="fallback">Encontered an error: {error}</div>
</ColRealtime>

Performing Queries

ColRealtime also supports filtering data using queries, like this example: 

<script>
	import ColRealtime from 'sveltekit-fire';
	import { orderBy, limit } from 'firebase/firestore';

	let query = [orderBy('title', 'asc'), limit(10)];
</script>

<ColRealtime path={'posts'} {query} log let:data={posts} let:error>
	<!-- 
	yay, the collection has loaded
	and will update automatically 
	-->
	{#each posts as post}
		<p>{post.title}</p>
	{/each}
	<div slot="loading">Loading</div>
	<div slot="fallback">Encontered an error: {error}</div>
</ColRealtime>