All Projects → open-source-labs → Obsidian

open-source-labs / Obsidian

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

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Labels

Projects that are alternatives of or similar to Obsidian

Commerceql
UNMAINTAINED
Stars: ✭ 217 (-6.06%)
Mutual labels:  graphql
Spectaql
Autogenerate static GraphQL API documentation
Stars: ✭ 198 (-14.29%)
Mutual labels:  graphql
Aws Mobile Appsync Sdk Ios
iOS SDK for AWS AppSync.
Stars: ✭ 231 (+0%)
Mutual labels:  graphql
Graphql Rest Proxy
Turn your REST API into GraphQL - A Proxy Server that pipes request from GraphQL to REST with GraphQL DSL, performant nested children, mutations, input types, and more.
Stars: ✭ 218 (-5.63%)
Mutual labels:  graphql
Gateway
A federated api gateway for graphql services. https://gateway.nautilus.dev/
Stars: ✭ 221 (-4.33%)
Mutual labels:  graphql
Codeponder
Marketplace for Code Reviews
Stars: ✭ 221 (-4.33%)
Mutual labels:  graphql
Spotify Graphql
GraphQL schema for Spotify WebAPI — TypeScript / Node.js (v6)
Stars: ✭ 213 (-7.79%)
Mutual labels:  graphql
Awesome Js Posts
A curated list of latest posts, blogs and repositories related to JavaScript.
Stars: ✭ 232 (+0.43%)
Mutual labels:  graphql
Graphql Go Example
Example use of https://github.com/graph-gophers/graphql-go
Stars: ✭ 222 (-3.9%)
Mutual labels:  graphql
Prisma Ecommerce
💰A graphql e-commerce real-world fullstack example (backoffice included)
Stars: ✭ 231 (+0%)
Mutual labels:  graphql
Modern Graphql Tutorial
📖 A simple and easy GraphQL tutorial to get started with GraphQL.
Stars: ✭ 219 (-5.19%)
Mutual labels:  graphql
Tensei
🚀 Content management and distribution with a touch of elegance.
Stars: ✭ 217 (-6.06%)
Mutual labels:  graphql
Canner
⚡️[NOT MAINTAINED] Content Management Framework creates custom CMS fast and easy. Support data sources such as Firebase/Firestore, GraphQL and Restful APIs.
Stars: ✭ 2,472 (+970.13%)
Mutual labels:  graphql
Website
Website of [email protected], Powered by JAMStack
Stars: ✭ 218 (-5.63%)
Mutual labels:  graphql
Graphql Ruby
GraphQL Ruby example for How To GraphQL
Stars: ✭ 231 (+0%)
Mutual labels:  graphql
Graphql Php
A PHP7 implementation of the GraphQL specification.
Stars: ✭ 217 (-6.06%)
Mutual labels:  graphql
Create Graphql Api
Set up a Typescript GraphQL API by running one command.
Stars: ✭ 223 (-3.46%)
Mutual labels:  graphql
Opencollective Api
Open Collective's API. A GraphQL API powered by Sequelize and PostgreSQL.
Stars: ✭ 233 (+0.87%)
Mutual labels:  graphql
Kit
ReactQL starter kit (use the CLI)
Stars: ✭ 232 (+0.43%)
Mutual labels:  graphql
Graphql Flutter
A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package.
Stars: ✭ 2,811 (+1116.88%)
Mutual labels:  graphql

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

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)`
  // 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

Alonso Garza
Burak Caliskan
Matt Meigs
Travis Frank
Lourent Flores
Esma Sahraoui
Derek Miller
Eric Marcatoma
Spencer Stockton

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].