DEV Community

Cover image for How to build a full stack serverless application with Svelte and GraphQL

How to build a full stack serverless application with Svelte and GraphQL

Shadid Haque on January 26, 2022

In this tutorial, you learn to will build a full-stack serverless application with Svelte.js, GraphQL, and Fauna. You will build a blogging platfor...
Collapse
 
jeroeng profile image
Jeroen Keukendeur • Edited

npm i @urql/svelte --save will get you version 2.0.2, which causes an error on setClient(client);.

Be sure to use: "@urql/svelte": "^1.3.3"

Also, the imports at /src/lib/Edit.svelte differ from the file in your Github.

Collapse
 
shadid12 profile image
Shadid Haque

Good catch. Thank you

Collapse
 
hgoona profile image
HirangaG

@shadid12 @jeroeng I'm facing this error right now. Why does the new version not have the setClient and the other things?

Also, how do you specify the version to be installed?

Thread Thread
 
shadid12 profile image
Shadid Haque

Specify the version for sveltekit ?

Collapse
 
benoitbuyse profile image
Benoit Buyse

Was looking just for this! A recent tutorial that uses SvelteKit and Fauna. Thank you so much!

Collapse
 
shadid12 profile image
Shadid Haque

glad you like it. Let me know if you have any feedback.

Collapse
 
benoitbuyse profile image
Benoit Buyse

I am following the tutorial now, didn't have time until now. I am a programming student and am learning SvelteKit and Fauna on my own because I feel like the serverless stack is the way to go and I don't like the verbosity of React which we are taught at school. So I am still a bit clueless... Your tutorial certainly was a big help to set up SvelteKit and Fauna!

One thing I will do is alter the code so it uses JWT instead of Session cookies because it seems like a more efficient way for authorization to me (less use of the database)?

One question I have for you: what happens to the environment variables from the .env file when we deploy to Vercel or Netlify? Does the deployment script handle the .env files and store those variables in a secure way on the server, or do they just stay in the .env file? In case of the latter, is this okay or should something else be done for production to store these keys? I read that sensitive information should not be stored in .env files for production? I don't expect a long, detailed answer, just a little push in the right direction :) Thank you in advance!

Thread Thread
 
shadid12 profile image
Shadid Haque

Thanks for taking the time and going over the blog. I totally agree JWT based authentication is probably the most secure way to go for a real application. There are services like Auth0, OKTA, Cognito to do JWT auth. Authentication is a big topic so I would definitely try to make another post about it.

As for environmental variables they get hidden and vercel puts them into a secure store manager by vercel. Same with netlify.

Thread Thread
 
benoitbuyse profile image
Benoit Buyse

Thanks for the reply! Would be very interesting to see another post about authentication.

Collapse
 
crearesite profile image
WebsiteMarket

Svelte is great. Thank for sharing

Collapse
 
knoxjoseph profile image
Knox Joseph

The tutorial doesn't seem to work with Sveltekit "version": "1.5.0"
Svelte seems to have changed a lot of stuff.
This is the error I get after I tried to adapt it to the new Sveltekit:

9:04:57 am [vite] ✨ new dependencies optimized: @urql/core, wonka, @urql/svelte
9:04:57 am [vite] ✨ optimized dependencies changed. reloading
Internal server error: Function called outside component initialization
at get_current_component (/node_modules/svelte/internal/index.mjs:988:15)

Collapse
 
shadid12 profile image
Shadid Haque

@knoxjoseph thanks for the heads up. I will update this shortly.

Collapse
 
gevera profile image
Denis Donici

Keep it up! Useful tutorial