DEV Community

Cover image for Appwrite's Isomorphic Web SDK
Torsten Dittmann for Appwrite

Posted on

Appwrite's Isomorphic Web SDK

We at Appwrite recently announced our new web SDK and would love to share the improvements we introduced. This article is a quick summary of what has changed and things you need to keep in mind while using the latest version of our SDK.

For the developers not much has changed, but internally some things have been rewritten that enable completely new use cases.

Breaking Changes

Let's start with the first and only breaking change: the way our Web SDK is imported. We have switched from default to named exports.

This allows for innovative auto completion and takes away the user's decision making when importing. Every decision you need to make slows you down, which is why things like coding conventions lead to faster development.

It also unifies the importing process, which could be different depending on the bundler in our previous approach.

import * as Appwrite from "appwrite";

// is now

import { Appwrite } from "appwrite";
Enter fullscreen mode Exit fullscreen mode

Isomorphic

Previously, our SDK was initialized in the window object of the browser. This meant that the SDK only worked in the browser and did not cooperate with technologies like Next.js, Nuxt.js or Svelte Kit, which also interact server-side in Node.js.

That's why we refactored parts of our SDK so that it acts isomorphically and according to the environment.

// Node.js
const { Appwrite } = require("appwrite");

// ESM - Modern Javascript
import { Appwrite } from "appwrite";

// IIFE - Browser
const { Appwrite } = window.Appwrite;
Enter fullscreen mode Exit fullscreen mode

JWT

Talking about server-side rendering, when doing SDK calls in your users scope from the server, it is not possible right away, since the HTTP-only cookie used for authentication is saved in the user's browser. That's why the Web SDK now allows to use JWT for authentication.

const sdk = new Appwrite();
sdk.setJWT("eyJhbGciOiJIUzI1NiI.....");

// Prints out the user attached to the JWT
sdk.account.get().then(console.log);
Enter fullscreen mode Exit fullscreen mode

Typescript

Also, the first preparations for the upcoming response models have been integrated, which is going to provide full Typescript coverage across every service.

For this release, the Promise<unknown> generic has been added to all methods that will receive a response from the server. This way it is easier for developers right now to implement their own definitions when working with Appwrite and Typescript.

type User = {
    $id: string;
    name: string;
}

const userA = await sdk.account.get<User>();
const userB: User = await sdk.account.get();

Enter fullscreen mode Exit fullscreen mode

Learn More

  • You can find the new version of the NPM package here.
  • Checkout Appwrite's Github Repo.
  • Our Discord Server is the place to be if you ever get stuck.
  • You can find all our Documentation here.

Top comments (0)