Skip to content

GraphQL, built for Deno - a native GraphQL caching client and server module

License

Notifications You must be signed in to change notification settings

cjamesb/obsidian

 
 

Repository files navigation

Obsidian

GraphQL, built for Deno.

Obsidian Tweet

from Lascaux

GitHub GitHub issues GitHub last commit GitHub Repo stars

Features

  • GraphQL query abstraction and caching in SSR React projects, improving the performance of your app
  • Normalized caching, optimizing memory management to keep your site lightweight and fast
  • Fullstack integration, leveraging client-side and server-side caching to streamline your caching strategy
  • Support for GraphQL fragments, directives, and variables
  • Optional GraphQL DoS attack mitigation security module

Overview

Obsidian is Deno's first native GraphQL caching client and server module. Boasting lightning-fast caching and fetching capabilities alongside headlining normalization and destructuring strategies, Obsidian is equipped to support scalable, highly performant applications.

Optimized for use in server-side rendered React apps built with Deno, full stack integration of Obsidian enables many of its most powerful features, including optimized caching exchanges between client and server and extremely lightweight client-side caching.

Documentation and Demo

obsidian.land

Installation

QUICK START

In the server:

import { ObsidianRouter } from 'https://deno.land/x/obsidian/mod.ts';

In the app:

import { ObsidianWrapper } from 'https://deno.land/x/obsidian/clientMod.ts';

Creating the Router

import { Application, Router } from 'https://deno.land/x/oak/mod.ts';
import { ObsidianRouter, gql } from 'https://deno.land/x/obsidian/mod.ts';

const PORT = 8000;

const app = new Application();

const types = (gql as any)`
  // GraphQL type definitions
`;

const resolvers = {
  // Resolvers
}

interface ObsRouter extends Router {
  obsidianSchema?: any;
}

const GraphQLRouter = await ObsidianRouter<ObsRouter>({
  Router,
  typeDefs: types,
  resolvers: resolvers,
  redisPort: 6379,
});

const router = new Router();
router.get('/', handlePage);

function handlePage(ctx: any) {
  try {
    const body = (ReactDomServer as any).renderToString(<App />);
    ctx.response.body = `<!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>SSR React App</title>
      </head>
      <body>
        <div id="root">\${body}</div>
        <script src="/static/client.tsx" defer></script>
      </body>
      </html>`;
  } catch (error) {
    console.error(error);

app.use(GraphQLRouter.routes(), GraphQLRouter.allowedMethods());

await app.listen({ port: PORT });

Creating the Wrapper

import { ObsidianWrapper } from 'https://deno.land/x/obsidian/clientMod.ts';

const App = () => {
  return (
    <ObsidianWrapper>
      <MovieApp />
    </ObsidianWrapper>
  );
};

Making a Query

import { useObsidian, BrowserCache } from 'https://deno.land/x/obsidian/clientMod.ts';

const MovieApp = () => {
  const { query, cache, setCache } = useObsidian();
  const [movies, setMovies] = (React as any).useState('');

  const queryStr = `query {
      movies {
        id
        title
        releaseYear
        genre
      }
    }
  `;

  return (
    <h1>{movies}</h1>
    <button
      onClick={() => {
        query(queryStr)
        .then(resp => setMovies(resp.data))
        .then(resp => setCache(new BrowserCache(cache.storage)))
      }}
    >Get Movies</button>
  );
};

Making a Mutation

import { useObsidian, BrowserCache } from 'https://deno.land/x/obsidian/clientMod.ts';

const MovieApp = () => {
  const { mutate, cache, setCache } = useObsidian();
  const [movies, setMovies] = (React as any).useState('');

  const queryStr = `mutation {
    addMovie(input: {title: "Cruel Intentions", releaseYear: 1999, genre: "DRAMA" }) {
      id
      title
      releaseYear
      genre
    }
  }
  `;

  return (
    <h1>{movies}</h1>
    <button
      onClick={() => {
        mutate(queryStr)
        .then(resp => setMovies(resp.data))
        .then(resp => setCache(new BrowserCache(cache.storage)))
      }}
    >Get Movies</button>
  );
}

Documentation

obsidian.land

Authors

Lascaux Engineers

Kyung Lee
Justin McKay
Patrick Sullivan
Cameron Simmons
Raymond Ahn
Alonso Garza
Burak Caliskan
Matt Meigs
Travis Frank
Lourent Flores
Esma Sahraoui
Derek Miller
Eric Marcatoma
Spencer Stockton

About

GraphQL, built for Deno - a native GraphQL caching client and server module

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 58.0%
  • JavaScript 41.8%
  • Dockerfile 0.2%