Document

The Doc component fetches data from a Firestore document. If Firebase is not initialized it is automatically initialized before fetching the document.

Doc relies on Cloud Firestore Lite SDK to provide a light and fast access to Firestore documents.

Fetch a document

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

<Doc path={'posts/postId'} let:data={post}>
	<!-- yay, the document loaded -->
	{post.title}
</Doc>

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

Enable console logs

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

<Doc path={'posts/postId'} let:data={post} log>
    <!-- yay, the document loaded with console logs -->
	{post.title}
</Doc>

Loading State

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

<Doc path={'posts/postId'} log let:data={post}>
	<!-- yay, the document loaded -->
	{post.title}
	<div slot="loading">Loading</div>
</Doc>

Error Handling

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

<Doc path={'posts/postId'} log let:data={post} let:error>
	<!-- yay, the document loaded -->
	{post.title}
	<div slot="loading">Loading</div>
	<div slot="fallback">Encontered an error: {error}</div>
</Doc>

Parameters

Doc props

Props	Description
path	String \| Document Reference
log	Display console logs Default: false
maxWait	Number Default: 10000 Timeout to fetch data in ms
data	Variable where the data from the document is stored
error	Variable where the error message is stored if an error occurs

Doc 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 document data is loaded
before	Rendered before the document
after	Rendered after the document

Doc events

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

When you need to access document that are 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 DocRealtime instead of Doc

It's powered by Firestore's Realtime Updates

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

<DocRealtime path={'posts/postId'} log let:data={post} let:error>
	<!-- 
	 the document loaded and it will automatically 
	 rerender if the document changes
	-->
	{post.title}
	<div slot="loading">Loading</div>
	<div slot="fallback">Encontered an error: {error}</div>
</DocRealtime>

Sveltekit Fire