Obsidian
from Lascaux
Features
- GraphQL query abstraction and caching improving the performance of your app
- SSR React wrapper, allowing you to cache in browser
- Configurable caching options, giving you complete control over your cache
- Fullstack integration, leveraging client-side and server-side caching to streamline your caching strategy
- Support for the full GraphQL convention
- Support for client-side and server-side cache invalidation
- 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 rebuilding strategies, Obsidian is equipped to support scalable, highly performant applications.
With additional support for use in server-side rendered React apps built with Deno, full stack integration of Obsidian enables a fast and flexible caching solution.
Installation
Creating the Router
import { Application, Router } from 'https://deno.land/x/oak@v6.0.1/mod.ts';
import { ObsidianRouter, gql } from 'https://deno.land/x/obsidian/mod.ts';
import { resolvers } from './ import from your resolvers file'
import { types } from './ import your schema/types from schema/types file'
interface ObsRouter extends Router {
obsidianSchema?: any;
}
const GraphQLRouter = await ObsidianRouter<ObsRouter>({
Router,
typeDefs: types,
resolvers: resolvers,
redisPort: 6379, //Desired redis port
useCache: true, //Boolean to toggle all cache functionality
usePlayground: true, //Boolean to allow for graphQL playground
useQueryCache: true, //Boolean to toogle full query cache
useRebuildCache: true, //Boolean to toggle rebuilding from normalized data
customIdentifier: ["id", "__typename"]
});
// attach the graphql routers routes to our app
app.use(GraphQLRouter.routes(), GraphQLRouter.allowedMethods());
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
Developer Tool
information and instructions on how to use our developer tool can be found here:
oslabs-beta/obsidian-developer-tool
Dockerized Demo
working demo to install locally in docker:
oslabs-beta/obsidian-demo-docker
Working Example Demo Code
github for a demo with some example code to play with:
oslabs-beta/obsidian-demo-3.2
Authors
Yurii Shchyrba
Linda Zhao
Ali Fay
Anthony Guan
Yasir Choudhury
Yogi Paturu
Michael Chin
Dana Flury
Sardor Akhmedov
Christopher Berry
Olivia Yeghiazarian
Michael Melville
John Wong
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