GraphQL, built for Deno.
Obsidian
from Lascaux
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
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
Installation
QUICK START
In the server:
import { ObsidianRouter } from 'https://deno.land/x/[email protected]/mod.ts';In the app:
import { ObsidianWrapper } from 'https://deno.land/x/[email protected]/clientMod.ts';Creating the Router
import { Application, Router } from 'https://deno.land/x/[email protected]/mod.ts';
import { ObsidianRouter, gql } from 'https://deno.land/x/[email protected]/mod.ts';
const PORT = 8000;
const app = new Application();
const types = (gql as any)`
// Type definitions
`;
const resolvers = {
// Resolvers
}
interface ObsRouter extends Router {
obsidianSchema?: any;
}
const GraphQLRouter = await ObsidianRouter<ObsRouter>({
Router,
typeDefs: types,
resolvers: resolvers,
redisPort: 6379,
});
app.use(GraphQLRouter.routes(), GraphQLRouter.allowedMethods());
await app.listen({ port: PORT });Sending ObsidianSchema
interface initialState {
obsidianSchema?: any;
}
const initialState: initialState = {
obsidianSchema: GraphQLRouter.obsidianSchema
}
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>
<script>
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
</script>
</head>
<body>
<div id="root">${body}</div>
<script src="/static/client.tsx" defer></script>
</body>
</html>`;
} catch (error) {
console.error(error);
}
}
app.use(router.routes(), router.allowedMethods());Creating the Wrapper
import { ObsidianWrapper } from 'https://deno.land/x/[email protected]/clientMod.ts';
const App = () => {
return (
<ObsidianWrapper>
<WeatherApp />
</ObsidianWrapper>
);
};Making a Query
import { useObsidian } from 'https://deno.land/x/[email protected]/clientMod.ts';
const WeatherApp = () => {
const { gather } = useObsidian();
const [weather, setWeather] = (React as any).useState('Sunny');
return (
<h1>{weather}</h1>
<button
onClick={() => {
gather(`query { getWeather { id description } }`)
.then(resp => setWeather(resp.data.getWeather.description))
}}
>Get Weather</button>
);
};Documentation
Authors
Lascaux Engineers
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent