https://github.com/kesne/svelte-relay

Easily use GraphQL in Svelte, powered by the production-ready Relay runtime.
https://github.com/kesne/svelte-relay

Last synced: about 2 months ago
JSON representation

Easily use GraphQL in Svelte, powered by the production-ready Relay runtime.

• Host: GitHub
• URL: https://github.com/kesne/svelte-relay
• Owner: kesne
• Created: 2020-05-19T20:10:08.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-07-22T23:02:20.000Z (about 3 years ago)
• Last Synced: 2024-04-20T19:44:53.490Z (5 months ago)
• Language: TypeScript
• Homepage: https://kesne.github.io/svelte-relay/
• Size: 1.32 MB
• Stars: 108
• Watchers: 7
• Forks: 5
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - svelte-relay - ready Relay runtime. | kesne | 83 | (TypeScript)

README

        


	



Svelte Relay

Easily use GraphQL in Svelte, powered by the production-ready Relay runtime.


## Features

[Relay](https://relay.dev) bindings for [Svelte](https://svelte.dev).

## Example

### 1. Set the Relay Environment into the context

```svelte

	import { setRelayEnvironment } from 'svelte-relay';

	import myEnvironment from './environment';

	setRelayEnvironment(myEnvironment);

```

### 2. Write Queries

```svelte

	import { getQuery } from 'svelte-relay';

	// This is defined in the next section below.

	import Artist from './Artist';

	const query = getQuery(

		graphql`

			query ArtistQuery($artistID: String!) {

				# The root field for the query

				artist(id: $artistID) {

					# A reference to your fragment container

					...ArtistHeader_artist

				}

			}

		`,

		{

			artistID: 'some-id',

		},

	);

{#await $query}

	
Loading

{:then data}

	

{:catch error}

	
{error.message}

{/await}

```


### 3. Use Fragments

```svelte

	import { getFragment } from 'svelte-relay';

	export let artist;

	const data = getFragment(

		graphql`

			# This fragment is declaring that this component

			# needs an Artist, and these specific fields on

			# the Artist in order to render. Relay will

			# guarantee that this data is fetched and available

			# for this component.

			fragment ArtistHeader_artist on Artist {

				href

				bio

				name

				image {

					url

				}

			}

		`,

		artist,

	);



	

	


		
{data.name}

		
{data.bio}

	




```