Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stafflinepeopleplus/sveltekit-graphql
Opinionated GraphQL server and client setup for SvelteKit, utilising Houdini and Yoga
https://github.com/stafflinepeopleplus/sveltekit-graphql
graphql graphql-server graphql-yoga houdini svelte sveltekit
Last synced: 28 days ago
JSON representation
Opinionated GraphQL server and client setup for SvelteKit, utilising Houdini and Yoga
- Host: GitHub
- URL: https://github.com/stafflinepeopleplus/sveltekit-graphql
- Owner: StafflinePeoplePlus
- License: mit
- Created: 2023-11-02T16:07:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-27T18:02:28.000Z (about 1 month ago)
- Last Synced: 2024-09-28T21:41:32.737Z (about 1 month ago)
- Topics: graphql, graphql-server, graphql-yoga, houdini, svelte, sveltekit
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/sveltekit-graphql
- Size: 125 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# SvelteKit GraphQL
Opinionated GraphQL server and client setup for SvelteKit applications, utilising [Houdini](https://houdinigraphql.com) and [Yoga](https://the-guild.dev/graphql/yoga-server).
- 🔧 Minimal configuration
- 🎩 Powered by [Houdini](https://houdinigraphql.com) & [Yoga](https://the-guild.dev/graphql/yoga-server)
- âš¡ Quick & easy setup
## Introduction
SvelteKit GraphQL consists of three parts.
### CLI
The CLI is used on initial setup to quickly scaffold out a skeleton graphql server in an existing
SvelteKit app. It can also be used to add new modules later down the line.
### Vite Plugin
The vite plugin adds hooks to vite to run codegen on build, and on the dev server as you change your
schemas. It also automatically adds in the houdini vite plugin.
### Runtime Package
To avoid needing to manually install and configure many of the dependencies you typically need when
working with GraphQL, SvelteKit GraphQL provides a package wrapping and/or exporting these as
needed.
## Getting Started
The following assumes you already have a SvelteKit app set up and working, and that you are in the
root directory of your app in your terminal. If you don't have a SvelteKit app yet, follow the
official SvelteKit documentaion to create one and then come back here once that is confirmed
working.
Install sveltekit-graphql
```bash
npm i -D sveltekit-graphql
```
Run the script to initialise your repo. It is recommended to commit any pending changes
before running this.
```bash
npx sveltekit-graphql init
```
Assuming everything worked as intended, you should now have a working GraphQL setup in your
SvelteKit app!
Run the dev server to check if everything is working:
```bash
npm run dev
```
Going to http://localhost:5173/graphql, you should see the Yoga GraphiQL interface.
### Next Steps
You can now start building out your GraphQL queries and mutations. The CLI has set you up with the
beginnings of a module structure in 'src/graphql/' allowing you to split up your schema into
separate areas of concern. You are free to expand on this or simply stay with one module. Check out
the [Yoga documentation](https://the-guild.dev/graphql/yoga-server) to learn more.
Houdini is set up and ready for you to start making client queries. Check out the [houdini
documentation](https://houdinigraphql.com/intro) to learn more.