10 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/server/dashQL/queryHandler.ts:
--------------------------------------------------------------------------------
1 | import { parse } from 'graphql/language/parser';
2 | import dash from './dashCache';
3 | // const redisBase = require('redis');
4 | class queryHandler {
5 | redis: any;
6 | constructor(redis: any) {
7 | this.redis = redis;
8 | this.handleQueries = this.handleQueries.bind(this);
9 | }
10 |
11 | async handleQueries(req: any, res: any, next: any) {
12 | const query = req.body.query;
13 | //parse query
14 | const parsedQuery: any = parse(query);
15 | //start time
16 | const startTime = performance.now();
17 | const dashCaches = new dash(parsedQuery, this.redis);
18 | const responseFromdashCache = await dashCaches.cacheHandler();
19 |
20 | //attached responses from dashCache to res.locals
21 | const hitPercentage = dashCaches.totalHits / dashCaches.mapLength;
22 | res.locals.res = JSON.stringify(responseFromdashCache);
23 | res.locals.hitPercentage = hitPercentage;
24 | res.locals.missPercentage = 1 - hitPercentage;
25 | res.locals.cacheHit = hitPercentage === 1;
26 | res.locals.totalHits = dashCaches.totalHits;
27 | res.locals.totalQueries = dashCaches.mapLength;
28 |
29 |
30 | console.log('res.locals', res.locals.res);
31 | //end time
32 | const endTime = performance.now();
33 | const totalTime = endTime - startTime;
34 | console.log('logging total time', totalTime);
35 |
36 |
37 |
38 | res.locals.time = totalTime;
39 |
40 | return next();
41 | }
42 | }
43 |
44 | export default queryHandler;
45 |
--------------------------------------------------------------------------------
/__tests__/client/components/Nav.test.tsx:
--------------------------------------------------------------------------------
1 | // import { render, screen } from '@testing-library/react';
2 | // import Nav from '../../../client/components/Nav';
3 | // import { MemoryRouter } from 'react-router-dom';
4 | // import { beforeEach } from 'vitest';
5 |
6 | // // mock for being able to render nav page
7 | // const currentPage:string = "Home"
8 |
9 | // describe('Navbar Test', () => {
10 | // beforeEach(async () => {
11 | // render(
12 | // Result Details
11 |12 | Response Time:{" "} 13 | {chartData.length > 0 14 | ? `${Math.round(chartData[chartData.length - 1]["response_time"])} ms` 15 | : null} 16 |
17 |18 | Hit Percentage:{" "} 19 | {chartData.length > 0 20 | ? `${Math.round(chartData[chartData.length - 1]["hitPercentage"])}%` 21 | : null} 22 |
23 |24 | Miss Percentage:{" "} 25 | {chartData.length > 0 26 | ? `${Math.round(chartData[chartData.length - 1]["missPercentage"])}%` 27 | : null} 28 |
29 |30 | Aggregated Field Hit Rate:{" "} 31 | {chartData.length > 0 32 | ? `${Math.round((hitsWithTotal[0] / hitsWithTotal[1]) * 100)}%` 33 | : null} 34 |
35 |
30 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/client/components/Demo_Components/PieChart.tsx:
--------------------------------------------------------------------------------
1 | import { Pie } from "react-chartjs-2";
2 | import { Chart, registerables, CategoryScale, ArcElement } from "chart.js";
3 | Chart.register(ArcElement);
4 | Chart.register(...registerables);
5 | Chart.register(CategoryScale);
6 |
7 | type ResultTypes = {
8 | chartData: any;
9 | cacheHits?: number;
10 | hitsWithTotal: number[];
11 | };
12 |
13 | export default function PieChart({ chartData, hitsWithTotal }: ResultTypes) {
14 | const currentPercentage =
15 | chartData.length !== 0 ? (hitsWithTotal[0] / hitsWithTotal[1]) * 100 : 0;
16 | const pieData = {
17 | // labels: Data.map((data) => data.id),
18 | labels: ["Hit %", "Miss %"],
19 | datasets: [
20 | {
21 | label: "Cache Hit Rate",
22 | data: [currentPercentage, 100 - currentPercentage],
23 | backgroundColor: ["#4682B4", "#c0c0c0 "],
24 | hoverBackgroundColor: ["lightgreen", "#FF7F7F"],
25 | hoverOffset: 4,
26 | rotation: -90,
27 | borderColor: "black",
28 | aspectRatio: 0,
29 | borderWidth: 1,
30 | },
31 | ],
32 | };
33 |
34 | Chart.defaults.plugins.tooltip.callbacks.label = function (context) {
35 | const total: any = context.dataset.data.reduce(
36 | (x: any, y: any) => x + y,
37 | 0
38 | );
39 | const currentValue = context.parsed;
40 | const percentage = ((currentValue / total) * 100).toFixed(0);
41 | return `${percentage}%`;
42 | };
43 | return (
44 | 31 | Response Time Graph 32 |
33 |
45 | {/*
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/server/server.ts:
--------------------------------------------------------------------------------
1 |
2 | import express from "express";
3 | import { parse } from "graphql/language/parser";
4 | import path from "path";
5 | // import redisTest from './redis.ts';
6 | import cors from "cors";
7 |
8 | import schema from "./Schemas/schema";
9 | import { createHandler } from "graphql-http/lib/use/express";
10 | const redisBase = require("redis");
11 | // import redisBase from 'redis';
12 | import dashQL from "./dashQL/queryHandler";
13 |
14 | const app = express();
15 | const PORT = process.env.PORT || 5001;
16 | app.use(cors());
17 | app.use(express.json());
18 |
19 | app.use(express.static(path.resolve(__dirname, "../client")));
20 | const redis = redisBase.createClient({
21 | password: "tqVEk7pRA8dgdiwUjOGzCvTJjfK2YFMt",
22 | socket: {
23 | host: "redis-12168.c321.us-east-1-2.ec2.cloud.redislabs.com",
24 | port: 12168,
25 | },
26 | });
27 | (async () => {
28 | console.log("Connecting to Redis...");
29 | redis.on("error", (error: string) => console.error(`Ups : ${error}`));
30 | await redis.connect();
31 | })();
32 |
33 | const queryHandler = new dashQL(redis);
34 | const handleQueries = queryHandler.handleQueries;
35 |
36 | app.use("/dashQL", handleQueries, (_req: any, res: any) => {
37 | return res.status(200).json(res.locals);
38 | });
39 |
40 | app.use(
41 | "/api/query",
42 | createHandler({
43 | schema,
44 | })
45 | );
46 |
47 | app.use("/test", (req, res) => {
48 | const parsedQuery: any = parse(req.body.query);
49 | console.log(
50 | "logging parsed query: ",
51 | parsedQuery.definitions[0].selectionSet.selections[0].selectionSet
52 | .selections[2]
53 | );
54 | return res.status(200).send("test");
55 | });
56 |
57 | app.use("/clearCache", (_req, res) => {
58 | redis.FLUSHDB();
59 | return res.status(200).send("Cache cleared");
60 | });
61 |
62 | // app.get('/redis', async (req: any, res: any) => {
63 | // console.log(req);
64 | // const response = await redisTest.get('Hello');
65 | // console.log(response);
66 | // return res.status(200).send(response);
67 | // });
68 |
69 | app.listen(PORT, () => {
70 | console.log(`Listening on port ${PORT}`);
71 | });
72 |
73 | module.exports = app;
74 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cacheql",
3 | "private": true,
4 | "version": "0.0.0",
5 | "scripts": {
6 | "start": "set NODE_ENV=production && node server/server.ts",
7 | "dev": "concurrently \"vite\" \"nodemon server/server.ts\" --open",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview",
11 | "test": "vitest",
12 | "vercel-build": "echo hello"
13 | },
14 | "dependencies": {
15 | "@emotion/react": "^11.11.3",
16 | "@emotion/styled": "^11.11.0",
17 | "@fontsource-variable/source-code-pro": "^5.0.17",
18 | "@fontsource/open-sans": "^5.0.22",
19 | "@mui/icons-material": "^5.15.8",
20 | "@mui/material": "^5.15.7",
21 | "@types/jest": "^29.5.12",
22 | "axios": "^1.6.7",
23 | "chart.js": "^4.4.1",
24 | "concurrently": "^8.2.2",
25 | "cors": "^2.8.5",
26 | "express": "^4.18.2",
27 | "graphql": "^16.8.1",
28 | "graphql-http": "^1.22.0",
29 | "jest": "^29.7.0",
30 | "node": "^21.6.1",
31 | "nodemon": "^3.1.0",
32 | "pg": "^8.11.3",
33 | "react": "^18.2.0",
34 | "react-chartjs-2": "^5.2.0",
35 | "react-code-blocks": "^0.1.6",
36 | "react-dom": "^18.2.0",
37 | "react-highlight": "^0.15.0",
38 | "react-router-dom": "^6.22.0",
39 | "redis": "^4.6.13",
40 | "scripts": "^0.1.0",
41 | "supertest": "^6.3.4",
42 | "ts": "^0.0.0"
43 | },
44 | "devDependencies": {
45 | "@testing-library/jest-dom": "^6.4.2",
46 | "@testing-library/react": "^14.2.1",
47 | "@types/cors": "^2.8.17",
48 | "@types/express": "^4.17.21",
49 | "@types/node": "^20.11.20",
50 | "@types/react": "^18.2.43",
51 | "@types/react-dom": "^18.2.17",
52 | "@typescript-eslint/eslint-plugin": "^6.14.0",
53 | "@typescript-eslint/parser": "^6.14.0",
54 | "@vitejs/plugin-react": "^4.2.1",
55 | "eslint": "^8.55.0",
56 | "eslint-plugin-react-hooks": "^4.6.0",
57 | "eslint-plugin-react-refresh": "^0.4.5",
58 | "jsdom": "^24.0.0",
59 | "ts-node": "^10.9.2",
60 | "typescript": "^5.3.3",
61 | "vite": "^5.1.1",
62 | "vitest": "^1.3.1"
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/client/components/Demo_Components/queryCode.tsx:
--------------------------------------------------------------------------------
1 | // import { CopyBlock, dracula } from 'react-code-blocks'
2 | type Querystr = {
3 | checkboxes: boolean[];
4 | nestedCheckboxes: boolean[];
5 | keys: string[];
6 | currentDropdown: string;
7 | id: string | undefined;
8 | };
9 |
10 | export default function QueryCode({
11 | checkboxes,
12 | nestedCheckboxes,
13 | keys,
14 | currentDropdown,
15 | id,
16 | }: Querystr) {
17 | // define what which properties will be displayed (ex: name, mass). These are used for being able to create the query code format to display
18 | const firstBox: string | null = checkboxes[0] ? `${keys[0]}` : null;
19 | const secondBox: string | null = checkboxes[1] ? `${keys[1]}` : null;
20 | const thirdBox: string | null = checkboxes[2] ? `${keys[2]}` : null;
21 | let fourthBox: string;
22 | if (checkboxes[3] && currentDropdown === "people") {
23 | fourthBox = `${keys[3]} {`;
24 | } else if (checkboxes[3] && currentDropdown !== "people") {
25 | fourthBox = `${keys[3]}`;
26 | } else {
27 | fourthBox = "";
28 | }
29 |
30 | const firstNestedBox: string =
31 | nestedCheckboxes[0] && checkboxes[3] ? `${keys[4]}` : "";
32 | const secondNestedBox: string =
33 | nestedCheckboxes[1] && checkboxes[3] ? `${keys[5]}` : "";
34 |
35 | const idBox: string = id ? `(_id:${id})` : "";
36 | const end: null | string =
37 | !firstBox && !secondBox && !thirdBox && !fourthBox ? null : `}`;
38 |
39 | return (
40 | Hit/Miss Rate Chart
*/} 46 |
41 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/client/components/Demo_Components/BarChart.tsx:
--------------------------------------------------------------------------------
1 | import { Bar } from "react-chartjs-2";
2 | import { Chart, registerables, CategoryScale, ArcElement } from "chart.js";
3 | Chart.register(ArcElement);
4 | Chart.register(...registerables);
5 | Chart.register(CategoryScale);
6 |
7 | export default function BarChart({ chartData }: any) {
8 | const barData = {
9 | labels: chartData.map((data: any) => `Run ${data.id}`),
10 | datasets: [
11 | {
12 | label: "Hit Percentage",
13 | backgroundColor: "#4682B4",
14 | data: chartData.map((data: any) => data.hitPercentage),
15 | borderColor: "black",
16 | borderWidth: 1,
17 | maxBarThickness: 70,
18 | hoverBackgroundColor: "lightgreen",
19 | },
20 | {
21 | label: "Miss Percentage",
22 | backgroundColor: "#c0c0c0",
23 | data: chartData.map((data: any) => data.missPercentage),
24 | borderColor: "black",
25 | borderWidth: 1,
26 | maxBarThickness: 70,
27 | hoverBackgroundColor: "#FF7F7F",
28 | },
29 | ],
30 | };
31 |
32 | return (
33 | {`query {`}
42 | {`${currentDropdown} ${idBox} ${
43 | !firstBox && !secondBox && !thirdBox && !fourthBox ? "" : "{"
44 | }`}
45 | {firstBox ? `${firstBox},` : null}
46 | {secondBox ? `${secondBox},` : null}
47 | {thirdBox ? `${thirdBox},` : null}
48 | {fourthBox ? `${fourthBox}` : null}
49 | {firstNestedBox ? `name,` : null}
50 |
51 | {secondNestedBox ? `${secondNestedBox}` : null}
52 |
53 |
54 | {firstNestedBox || secondNestedBox ? `}` : null}
55 |
56 | {end}
57 | {"}"}
58 |
34 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/client/components/styles/Home.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: Khula;
3 | src: url('../assets/fonts/Khula-Regular.ttf');
4 | }
5 | #home {
6 | height: 6vh;
7 | }
8 | #outside {
9 | display: flex;
10 | flex-direction: column;
11 | align-items: center;
12 | }
13 | #pWrapper {
14 | width: 28vw;
15 | align-self: center;
16 | }
17 | .bigText {
18 | align-self: center;
19 | font-size: 3.5rem;
20 | margin-bottom: 0px;
21 | }
22 | .smallText {
23 | text-align: center;
24 | font-size: 1.5rem;
25 | color: rgba(87, 87, 87, 0.808);
26 | }
27 | .grayLine {
28 | color: rgba(87, 87, 87, 0.808);
29 | overflow: visible;
30 | width: 90vw;
31 | margin-top: 60px;
32 | margin-bottom: 60px;
33 | }
34 | #box {
35 | height: 100%;
36 | width: 300px;
37 | border: 2px;
38 | display: flex;
39 | flex-direction: column;
40 | align-items: center;
41 | font-size: 1.3rem;
42 | color: white;
43 | font-size: 18px !important;
44 | }
45 | #grey {
46 | color: grey;
47 | }
48 | #codeWrapper {
49 | align-self: center;
50 | display: flex;
51 | flex-direction: row;
52 | border-radius: 6px;
53 | background-color: rgb(60, 59, 59);
54 | }
55 | #copy {
56 | height: 4vh;
57 | }
58 | #horizBar {
59 | width: 95%;
60 | display: flex;
61 | justify-content: center;
62 | }
63 | #copyButton {
64 | background-color: rgba(0, 0, 0, 0);
65 | border: 2px;
66 | justify-self: center;
67 | cursor: pointer;
68 | margin-right: 20px;
69 | margin-top: 2px;
70 | }
71 | #lowerBigText {
72 | font-size: 2.5rem;
73 | }
74 | #whatIsWrap {
75 | display: flex;
76 | flex-direction: column;
77 | align-items: center;
78 | width: 40%;
79 | align-self: center;
80 | }
81 | #whatIsText {
82 | text-align: center;
83 | }
84 | #horizBar {
85 | display: flex;
86 | flex-direction: row;
87 | justify-content: space-around;
88 | margin-top: 100px;
89 | }
90 | .vertColumn {
91 | display: flex;
92 | flex-direction: column;
93 | align-items: center;
94 | text-align: center;
95 | width: 25vw;
96 | }
97 | .bottomImg {
98 | width: auto;
99 | height: 100px;
100 | }
101 | .lowerNormText {
102 | font-size: 1.7rem;
103 | }
104 | .randomText {
105 | font-size: 1.4rem;
106 | }
107 | .vertLine {
108 | border-left: 2px solid;
109 | border-color: rgba(87, 87, 87, 0.808);
110 | height: 200px;
111 | }
112 | .demoSect {
113 | align-self: center;
114 | margin-top: 100px;
115 | text-align: center;
116 | }
117 | #demoButton {
118 | height: 50px;
119 | width: 200px;
120 | border: hidden;
121 | border-radius: 6px;
122 | background-color: #162345;
123 | color: white;
124 | font-size: 1rem;
125 | cursor: pointer;
126 | box-shadow: 2px 2px 3px rgb(80, 80, 80);
127 | }
128 | #contactBar {
129 | padding: 10px;
130 | margin-top: 50px;
131 | border-top-left-radius: 12px;
132 | border-top-right-radius: 12px;
133 | text-align: center;
134 | }
135 | #contactContain {
136 | display: flex;
137 | flex-direction: row;
138 | justify-content: space-around;
139 | }
140 |
--------------------------------------------------------------------------------
/__tests__/client/components/QueryResult.test.tsx:
--------------------------------------------------------------------------------
1 | // import { expect, test } from 'vitest';
2 | // import QueryResult from '../../../client/components/Demo_Components/QueryResult';
3 | // import { render, screen } from '@testing-library/react';
4 |
5 | // test('QueryResult renders correctly with selected ID', async () => {
6 | // // Mock data and props
7 | // const data = {
8 | // res: '{"data":{"people":{"name":"Luke Skywalker","mass":"77","hair_color":"blond","eye_color":"blue"}}}',
9 | // };
10 | // const keys = ['name', 'mass', 'hair_color', 'eye_color'];
11 | // const currentDropdown = 'people';
12 | // const checkbox1 = true;
13 | // const checkbox2 = true;
14 | // const checkbox3 = true;
15 | // const checkbox4 = true;
16 | // const id = '1';
17 | // const dataField = 'people';
18 |
19 | // // Render the QueryResult component with props
20 | // const { getByText } = render(
21 | // 35 | Stacked Bar Chart 36 |
37 |
47 | {values[i] ? `${boxes[i]} {` : null}
48 |
49 | );
50 | } else {
51 | divBoxes.push(
52 |
53 | {values[i] ? `${boxes[i]}: ${values[i]},` : null}
54 |
55 | );
56 | }
57 | }
58 | } else {
59 | for (let i = 0; i < 4; i++) {
60 | if (values[i]) {
61 | const jsonValues: string = values[i];
62 | divBoxes.push({`${boxes[i]}s:`}
);
63 | for (let j = 0; j < 10; j++) {
64 | divBoxes.push({jsonValues[j]}
);
65 | }
66 | }
67 | }
68 | }
69 |
70 | const nestedDivBoxes = [];
71 | if (checkboxes[3]) {
72 | nestedCheckboxes[0]
73 | ? nestedDivBoxes.push(
74 | {`name: ${
75 | res.data[dataField][keys[3]]["name"]
76 | },`}
77 | )
78 | : null;
79 | nestedCheckboxes[1]
80 | ? nestedDivBoxes.push(
81 | {`classification: ${
82 | res.data[dataField][keys[3]]["classification"]
83 | },`}
84 | )
85 | : null;
86 | }
87 |
88 | const nestedEnd: string =
89 | checkboxes[3] && currentDropdown === "people" ? "}" : "";
90 |
91 | return (
92 |
93 |
101 | );
102 | }
103 |
--------------------------------------------------------------------------------
/client/components/Home.tsx:
--------------------------------------------------------------------------------
1 | import './styles/Home.css';
2 | import copyImage from '../assets/copyIcon.png';
3 | import saveImage from '../assets/save.png';
4 | import handsImage from '../assets/hands.png';
5 | import clockImage from '../assets/clock.png';
6 | import drewImg from '../assets/drew.png';
7 | import danImg from '../assets/dan.png';
8 | import meredithImg from '../assets/fronheiser.jpeg';
9 | import kevinImg from '../assets/kevin.jpg';
10 | import Contact from './Contact.tsx';
11 |
12 | export default function Home() {
13 | return (
14 | {`query {`}
94 | {`${currentDropdown} ${idBox} {`}
95 | {divBoxes}
96 | {nestedDivBoxes}
97 | {nestedEnd}
98 | {end}
99 | {"}"}
100 |
15 |
16 |
38 |
104 | );
105 | }
106 |
--------------------------------------------------------------------------------
/server/Schemas/schema.ts:
--------------------------------------------------------------------------------
1 | const db = require('../models/model');
2 |
3 | import {
4 | GraphQLSchema,
5 | GraphQLObjectType,
6 | GraphQLString,
7 | GraphQLInt,
8 | GraphQLNonNull,
9 | GraphQLList,
10 | } from 'graphql';
11 |
12 | const peopleType = new GraphQLObjectType({
13 | name: 'People',
14 | fields: () => ({
15 | name: {
16 | type: GraphQLString,
17 | },
18 | mass: {
19 | type: GraphQLInt,
20 | },
21 | hair_color: {
22 | type: GraphQLString,
23 | },
24 | eye_color: {
25 | type: GraphQLString,
26 | },
27 | species_id: {
28 | type: GraphQLInt,
29 | },
30 | species: {
31 | type: speciesType,
32 | resolve: async (parent: any) => {
33 | console.log(parent);
34 | const sqlQuery = `SELECT * FROM species WHERE _id=${parent.species_id}`;
35 | const data = await db.query(sqlQuery);
36 | return data.rows[0];
37 | },
38 | },
39 | }),
40 | });
41 |
42 | // const PlanetType = new GraphQLObjectType({
43 | // name: 'Planets',
44 | // fields: () => ({
45 | // _id: {
46 | // type: new GraphQLNonNull(GraphQLInt),
47 | // },
48 | // name: {
49 | // type: GraphQLString,
50 | // },
51 | // population: {
52 | // type: GraphQLInt,
53 | // },
54 | // terrain: {
55 | // type: GraphQLString,
56 | // },
57 | // climate: {
58 | // type: GraphQLString,
59 | // },
60 |
61 | // }),
62 | // });
63 |
64 | const planetType = new GraphQLObjectType({
65 | name: 'Planets',
66 | fields: () => ({
67 | _id: {
68 | type: new GraphQLNonNull(GraphQLInt),
69 | },
70 | name: {
71 | type: GraphQLString,
72 | },
73 | population: {
74 | type: GraphQLInt,
75 | },
76 | terrain: {
77 | type: GraphQLString,
78 | },
79 | climate: {
80 | type: GraphQLString,
81 | },
82 | diameter: {
83 | type: GraphQLInt,
84 | },
85 | }),
86 | });
87 |
88 | const speciesType = new GraphQLObjectType({
89 | name: 'Species',
90 | fields: () => ({
91 | name: {
92 | type: GraphQLString,
93 | },
94 | classification: {
95 | type: GraphQLString,
96 | },
97 | average_height: {
98 | type: GraphQLString,
99 | },
100 | homeworld_id: {
101 | type: GraphQLInt,
102 | },
103 | homeworld: {
104 | type: planetType,
105 | resolve: async (parent: any) => {
106 | console.log(parent);
107 | const sqlQuery = `SELECT * FROM planets WHERE _id=${parent.homeworld_id}`;
108 | const data = await db.query(sqlQuery);
109 | return data.rows[0];
110 | },
111 | },
112 | }),
113 | });
114 |
115 | const RootQuery = new GraphQLObjectType({
116 | name: 'query',
117 | fields: {
118 | people: {
119 | type: peopleType,
120 | args: { _id: { type: GraphQLInt } },
121 | resolve: async (parent: any, args: any) => {
122 | console.log(parent);
123 | const sqlQuery = `SELECT * FROM people WHERE _id=${args._id}`;
124 | const data = await db.query(sqlQuery);
125 | return data.rows[0];
126 | },
127 | },
128 |
129 | peopleNoId: {
130 | type: new GraphQLList(peopleType),
131 | resolve: async (parent: any, args: any) => {
132 | const sqlQuery = `SELECT * FROM people`;
133 | const data = await db.query(sqlQuery);
134 | console.log('in non id data', data.rows);
135 | console.log(parent, args);
136 | return data.rows;
137 | },
138 | },
139 | planets: {
140 | type: planetType,
141 | // args: {},
142 | args: { _id: { type: GraphQLInt } },
143 | resolve: async (parent: any, args: any) => {
144 | const sqlQuery = `SELECT * FROM planets WHERE _id=${args._id}`;
145 | const data = await db.query(sqlQuery);
146 | // console.log("data rows", data.rows);
147 | console.log('in id data', data.rows[0]);
148 | console.log(parent, args);
149 | return data.rows[0];
150 | },
151 | },
152 | planetsNoId: {
153 | type: new GraphQLList(planetType),
154 | resolve: async (parent: any, args: any) => {
155 | const sqlQuery = `SELECT * FROM planets`;
156 | const data = await db.query(sqlQuery);
157 | console.log('in non id data', data.rows);
158 | console.log(parent, args);
159 | return data.rows;
160 | },
161 | },
162 | },
163 | });
164 | export default new GraphQLSchema({
165 | query: RootQuery,
166 | });
167 |
--------------------------------------------------------------------------------
/client/assets/fonts/OFL.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2014, Erin McLaughlin (hello@erinmclaughlin.com). Digitized data copyright 2010, Google Corporation.
2 |
3 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
4 | This license is copied below, and is also available with a FAQ at:
5 | https://openfontlicense.org
6 |
7 |
8 | -----------------------------------------------------------
9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10 | -----------------------------------------------------------
11 |
12 | PREAMBLE
13 | The goals of the Open Font License (OFL) are to stimulate worldwide
14 | development of collaborative font projects, to support the font creation
15 | efforts of academic and linguistic communities, and to provide a free and
16 | open framework in which fonts may be shared and improved in partnership
17 | with others.
18 |
19 | The OFL allows the licensed fonts to be used, studied, modified and
20 | redistributed freely as long as they are not sold by themselves. The
21 | fonts, including any derivative works, can be bundled, embedded,
22 | redistributed and/or sold with any software provided that any reserved
23 | names are not used by derivative works. The fonts and derivatives,
24 | however, cannot be released under any other type of license. The
25 | requirement for fonts to remain under this license does not apply
26 | to any document created using the fonts or their derivatives.
27 |
28 | DEFINITIONS
29 | "Font Software" refers to the set of files released by the Copyright
30 | Holder(s) under this license and clearly marked as such. This may
31 | include source files, build scripts and documentation.
32 |
33 | "Reserved Font Name" refers to any names specified as such after the
34 | copyright statement(s).
35 |
36 | "Original Version" refers to the collection of Font Software components as
37 | distributed by the Copyright Holder(s).
38 |
39 | "Modified Version" refers to any derivative made by adding to, deleting,
40 | or substituting -- in part or in whole -- any of the components of the
41 | Original Version, by changing formats or by porting the Font Software to a
42 | new environment.
43 |
44 | "Author" refers to any designer, engineer, programmer, technical
45 | writer or other person who contributed to the Font Software.
46 |
47 | PERMISSION & CONDITIONS
48 | Permission is hereby granted, free of charge, to any person obtaining
49 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
50 | redistribute, and sell modified and unmodified copies of the Font
51 | Software, subject to the following conditions:
52 |
53 | 1) Neither the Font Software nor any of its individual components,
54 | in Original or Modified Versions, may be sold by itself.
55 |
56 | 2) Original or Modified Versions of the Font Software may be bundled,
57 | redistributed and/or sold with any software, provided that each copy
58 | contains the above copyright notice and this license. These can be
59 | included either as stand-alone text files, human-readable headers or
60 | in the appropriate machine-readable metadata fields within text or
61 | binary files as long as those fields can be easily viewed by the user.
62 |
63 | 3) No Modified Version of the Font Software may use the Reserved Font
64 | Name(s) unless explicit written permission is granted by the corresponding
65 | Copyright Holder. This restriction only applies to the primary font name as
66 | presented to the users.
67 |
68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69 | Software shall not be used to promote, endorse or advertise any
70 | Modified Version, except to acknowledge the contribution(s) of the
71 | Copyright Holder(s) and the Author(s) or with their explicit written
72 | permission.
73 |
74 | 5) The Font Software, modified or unmodified, in part or in whole,
75 | must be distributed entirely under this license, and must not be
76 | distributed under any other license. The requirement for fonts to
77 | remain under this license does not apply to any document created
78 | using the Font Software.
79 |
80 | TERMINATION
81 | This license becomes null and void if any of the above conditions are
82 | not met.
83 |
84 | DISCLAIMER
85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93 | OTHER DEALINGS IN THE FONT SOFTWARE.
94 |
--------------------------------------------------------------------------------
/__tests__/client/api/apiFetch.test.tsx:
--------------------------------------------------------------------------------
1 | import getData from "../../../client/api/apiFetch";
2 |
3 | // mock for being able to render nav page
4 |
5 |
6 | describe("API Fetch Test", () => {
7 | const result: any = {
8 | peopleRes: null,
9 | planetsRes: null,
10 | nestedRes: null,
11 | peopleNoId: null,
12 | planetsNoId: null,
13 | };
14 | beforeEach(async () => {
15 | const pplStr = "query {people (_id:1){name, mass, , , }}";
16 | result.peopleRes = await getData({ query: pplStr });
17 | const planetStr = "query {planets (_id:1){name, population, , , }}";
18 | result.planetsRes = await getData({ query: planetStr });
19 | const nestedStr = "query {people (_id:1){name, , , species { name, } }}";
20 | result.nestedRes = await getData({ query: nestedStr });
21 | const peopleNoIdStr = "{peopleNoId {name, , , , }}";
22 | result.peopleNoId = await getData({ query: peopleNoIdStr });
23 | const planetsNoIdStr = "{planetsNoId {name, , , , }}";
24 | result.planetsNoId = await getData({ query: planetsNoIdStr });
25 | });
26 | test("Testing fetch to /dashQl endpoint for people schema with id", async () => {
27 | // tests
28 | expect(result.peopleRes.res).toStrictEqual(
29 | '{"data":{"people":{"name":"Luke Skywalker","mass":77}}}'
30 | );
31 | expect(result.peopleRes).toHaveProperty("res");
32 | expect(result.peopleRes).toHaveProperty("cacheHit");
33 | expect(result.peopleRes).toHaveProperty("hitPercentage");
34 | expect(result.peopleRes).toHaveProperty("missPercentage");
35 | expect(result.peopleRes).toHaveProperty("time");
36 | expect(result.peopleRes).toHaveProperty("totalHits");
37 | expect(result.peopleRes).toHaveProperty("totalQueries");
38 | });
39 |
40 | test("Testing fetch to /dashQl endpoint for planets schema with id", async () => {
41 | // tests
42 | expect(result.planetsRes.res).toStrictEqual(
43 | '{"data":{"planets":{"name":"Tatooine","population":200000}}}'
44 | );
45 | expect(result.planetsRes).toHaveProperty("res");
46 | expect(result.planetsRes).toHaveProperty("cacheHit");
47 | expect(result.planetsRes).toHaveProperty("hitPercentage");
48 | expect(result.planetsRes).toHaveProperty("missPercentage");
49 | expect(result.planetsRes).toHaveProperty("time");
50 | expect(result.planetsRes).toHaveProperty("totalHits");
51 | expect(result.planetsRes).toHaveProperty("totalQueries");
52 | });
53 |
54 | test("Testing fetch to /dashQl endpoint for nested people schema with id", async () => {
55 | // tests
56 | expect(result.nestedRes.res).toStrictEqual(
57 | '{"data":{"people":{"name":"Luke Skywalker","species":{"name":"Human"}}}}'
58 | );
59 | expect(result.nestedRes).toHaveProperty("res");
60 | expect(result.nestedRes).toHaveProperty("cacheHit");
61 | expect(result.nestedRes).toHaveProperty("hitPercentage");
62 | expect(result.nestedRes).toHaveProperty("missPercentage");
63 | expect(result.nestedRes).toHaveProperty("time");
64 | expect(result.nestedRes).toHaveProperty("totalHits");
65 | expect(result.nestedRes).toHaveProperty("totalQueries");
66 | });
67 |
68 | test("Testing fetch to /dashQl endpoint for people schema with NO id", async () => {
69 | // tests
70 | const parsedRes = await JSON.parse(result.peopleNoId.res);
71 | const expectedRes = [];
72 | for (let dataPoint of parsedRes.data.peopleNoId.name) {
73 | if (expectedRes.length >= 10) {
74 | break;
75 | }
76 | expectedRes.push(dataPoint);
77 | }
78 |
79 | expect(expectedRes).toStrictEqual([
80 | "Luke Skywalker",
81 | "C-3PO",
82 | "R2-D2",
83 | "Darth Vader",
84 | "Leia Organa",
85 | "Owen Lars",
86 | "Beru Whitesun lars",
87 | "R5-D4",
88 | "Biggs Darklighter",
89 | "Obi-Wan Kenobi",
90 | ]);
91 | expect(result.peopleNoId).toHaveProperty("res");
92 | expect(result.peopleNoId).toHaveProperty("cacheHit");
93 | expect(result.peopleNoId).toHaveProperty("hitPercentage");
94 | expect(result.peopleNoId).toHaveProperty("missPercentage");
95 | expect(result.peopleNoId).toHaveProperty("time");
96 | expect(result.peopleNoId).toHaveProperty("totalHits");
97 | expect(result.peopleNoId).toHaveProperty("totalQueries");
98 | });
99 |
100 | test("Testing fetch to /dashQl endpoint for planets schema with NO id", async () => {
101 | const parsedRes = await JSON.parse(result.planetsNoId.res);
102 | const expectedRes = [];
103 | for (let dataPoint of parsedRes.data.planetsNoId.name) {
104 | if (expectedRes.length >= 10) {
105 | break;
106 | }
107 | expectedRes.push(dataPoint);
108 | }
109 |
110 | expect(expectedRes).toStrictEqual([
111 | "Alderaan",
112 | "Yavin IV",
113 | "Hoth",
114 | "Dagobah",
115 | "Bespin",
116 | "Endor",
117 | "Naboo",
118 | "Coruscant",
119 | "Kamino",
120 | "Geonosis",
121 | ]);
122 | expect(result.planetsNoId).toHaveProperty("res");
123 | expect(result.planetsNoId).toHaveProperty("cacheHit");
124 | expect(result.planetsNoId).toHaveProperty("hitPercentage");
125 | expect(result.planetsNoId).toHaveProperty("missPercentage");
126 | expect(result.planetsNoId).toHaveProperty("time");
127 | expect(result.planetsNoId).toHaveProperty("totalHits");
128 | expect(result.planetsNoId).toHaveProperty("totalQueries");
129 | });
130 | });
131 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Welcome to dashQL
17 |
18 |
22 | 19 | A dashing and dynamic caching tool for GraphQL. 20 |
21 |
23 |
37 |
24 |
28 |
36 |
25 | $ npm install dashQL
26 |
27 | 38 |
39 |
48 | What is dashQL?
40 |41 | DashQL is an open-source caching solution for GraphQL, which leverages 42 | an advanced algorithm that breaks down a GraphQL query into its 43 | smallest parts before performing caching logic on it. This results in 44 | unmatched performance benefits, translating into a more tactile and 45 | responsive experience for the users of your application. 46 |
47 |
49 |
67 |
50 | 
51 |
54 |
55 | Cache Responses
52 |Efficiently store and retrieve data
53 |
56 | 
57 |
60 |
61 | Optimize Efficiency
58 |Reduce redundant network requests
59 |
62 | 
63 |
66 | Quicker Fetches
64 |Improve query response performance
65 |
68 |
73 | Ready to see how it works?
69 | 70 | 71 | 72 |
74 |
75 |
103 | 75 |
Meet the Team
76 |
77 |
102 |
2 |
3 | 
4 |
5 |
6 | 
7 | 
8 | 
9 | 
10 |
11 |
12 | 
13 | 
14 | 
15 | 
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | # About
26 |
27 | dashQL is a lightweight GraphQL caching tool utilizing Redis to cache queries at the field level to further improve reponse time and decrease the number of redundant requests required
28 |
29 | ## Table of Contents
30 | 1. [Features](https://github.com/oslabs-beta/dashQL/edit/main/README.md#features)
31 | 2. [Getting Started](https://github.com/oslabs-beta/dashQL/edit/main/README.md#getting-started)
32 | 3. [Demo](https://github.com/oslabs-beta/dashQL/edit/main/README.md#demo)
33 | 4. [Contributing](https://github.com/oslabs-beta/dashQL/edit/main/README.md#contributing-to-dashql)
34 | 5. [Authors](https://github.com/oslabs-beta/dashQL/edit/main/README.md#authors)
35 |
36 | # Features
37 | * Allows for caching at the field level from the GraphQL abstract syntax tree
38 | * Ability to handle query requests both with and without an argument
39 | * Ability to cache deeply nested queries
40 |
41 |
42 | # Getting Started
43 | 1. Install redis and define host and port in server file
44 | ```Javascript
45 | const redisClient = redis.createClient({
46 | host: "localhost",
47 | port: 6379,
48 | });
49 | ```
50 | 2. Download dashQL as an npm module and save it to your package.json as a dependency
51 | ```Javascript
52 | npm install dashql
53 | ```
54 | 3. Import dashQL into server file
55 | ```Javascript
56 | const dashQL = require('dashQL');
57 | ```
58 | 4. Create an instance of dashQL by passing in redisClient in server file
59 |
60 | ```Javascript
61 | const dashQL = new dashQL(redisClient);
62 | ```
63 |
64 | 5. On your server file which handles graphQL requests, name the endpoint '/dashQL' and put in dashQL as your middleware and return res.locals back to client
65 |
66 | ```Javascript
67 | app.use('/dashQL', dashQL, (req: Request, res: Response) => {
68 | return res.status(200).send(res.locals);
69 | });
70 | ```
71 |
72 | 6. Enjoy significantly faster response times specifically at the field level not just per query string!
73 |
74 |
75 |
76 | # Demo
77 | Feel free to visit our website to get an interactive demonstration of how our caching tool works and view the significantly improved response times
78 |
79 | After entering our site, you will be met with a demonstration with the ability to run GraphQL queries with an interactive selection tool utilizing the Star Wars API.
80 |
81 | 1. Select the fields you would like to query and a preview of the GraphQL query will be shown
82 |
83 | 
84 |
85 | 2. Click the 'Run Query' button to see the GraphQL query result. The metrics above will show the uncached response time populated on the graph and a cache hit/miss result will be logged to the bar charts. A cache miss will be logged the first time a unique query is run indicating that the query was not found in our cache and will be stored.
86 |
87 | 
88 |
89 |
90 | 3. This time, select an additional field to query. Then click the 'Run Query' button. The response time has drastically decreased as the previous field level queries were stored in the cache and the server only has to go to the database for one field.
91 |
92 | 
93 |
94 | 4. Feel free to play around with nested queries by selecting 'Species' or queries without an '_id' argument.
95 |
96 | 
97 | In this last example, you will notice the response time is decreased even further on the third query request as now all information is coming from the cache.
98 |
99 | 5. Lastly, click the 'Clear Cache' button to clear the cache and start over.
100 |
101 |
102 |
103 | # Contributing to dashQL
104 | The team at dashQL is excited you are interested in contributing to dashQL.
105 | 1. Fork repo from the `dev` branch
106 | 2. Create your feature branch (`git checkout -b feature/yourFeature`)
107 | 3. Stage and commit your changes (`git commit -m "added cool new feature"`)
108 | 4. Push to branch (`git push origin feature/yourFeature`)
109 | 5. Open a pull request to `dev` which will be reviewed by one of the dashQL authors prior to merge
110 |
111 | ## Roadmap for Future Development
112 | - [ ] Handle mutations
113 | - [ ] End-to-end testing
114 | - [ ] Additional eviction strategies
115 | - [ ] Security features
116 |
117 | # Authors
118 | Dan Bonney [LinkedIn](https://www.linkedin.com/in/dan-bonney/) | [Github](https://github.com/D-Bonney)
119 | Meredith Fronheiser [LinkedIn](https://www.linkedin.com/in/meredith-fronheiser/) | [Github](https://github.com/mfronheiser)
120 | Kevin Klochan [LinkedIn](https://www.linkedin.com/in/kevin-klochan-7a0ba7218/) | [Github](https://github.com/kevinklochan)
121 | Drew Williams [LinkedIn](https://www.linkedin.com/in/andrew-vaughan-williams/) | [Github](https://github.com/avwilliams1995)
122 |
123 |
124 |
125 | Please ⭐ our repo if you've found this useful, we want to be able to help as many of developers as we can!
126 |
--------------------------------------------------------------------------------
/client/components/styles/Demo.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: Khula;
3 | src: url("./assets/fonts/Khula-Regular.ttf");
4 | }
5 | @font-face {
6 | font-family: KhulaBold;
7 | src: url("./assets/fonts/Khula-Bold.ttf");
8 | }
9 | html,
10 | body {
11 | height: 100%;
12 | width: 100%;
13 | font-size: 16px;
14 | color: #162345;
15 | font-family: Khula;
16 | }
17 |
18 | nav {
19 | height: 60px;
20 | background-color: #162345;
21 | margin-top: -8px;
22 | display: flex;
23 | justify-content: space-between;
24 | }
25 |
26 | #left-nav,
27 | #right-nav {
28 | display: flex;
29 | height: 100%;
30 | width: 40%;
31 | align-items: center;
32 | justify-content: center;
33 | }
34 |
35 | #left-nav img {
36 | height: 45px;
37 | margin-top: 14px;
38 | }
39 |
40 | #right-nav {
41 | margin-right: 10px;
42 | margin-top: 2px;
43 | }
44 |
45 | #right-nav a {
46 | margin: 15px;
47 | color: white;
48 | text-decoration: none;
49 | }
50 |
51 | #right-nav a:hover {
52 | cursor: pointer;
53 | text-decoration: underline;
54 | color: white;
55 | }
56 | #githubLogo {
57 | height: 27px;
58 | margin-top: 3px;
59 | }
60 |
61 | #pageStyle {
62 | text-decoration: underline !important;
63 | }
64 |
65 | #logo {
66 | align-items: center;
67 | justify-content: center;
68 | align-content: center;
69 | color: white;
70 | }
71 |
72 | .demo {
73 | display: flex;
74 | flex-direction: column;
75 | width: 100%;
76 | justify-content: center;
77 | align-items: center;
78 | }
79 |
80 | #title {
81 | margin-top: 20px;
82 | font-size: 24px;
83 | font-family: KhulaBold;
84 | }
85 |
86 | .stats {
87 | display: flex;
88 | height: 560px;
89 | height: 560px;
90 | width: 97%;
91 | border: 1px solid #162345;
92 | border-radius: 15px;
93 | }
94 |
95 | #left-stats {
96 | display: flex;
97 | flex-direction: column;
98 | height: 95%;
99 | width: 50%;
100 | align-items: center;
101 | justify-content: start;
102 | padding-left: 20px;
103 | }
104 |
105 | #right-stats {
106 | margin-top: 13px;
107 | display: flex;
108 | flex-direction: column;
109 | height: 95%;
110 | width: 50%;
111 | align-items: center;
112 | justify-content: start;
113 | padding-right: 20px;
114 | }
115 |
116 | #response-graph {
117 | display: flex;
118 | flex: 4;
119 | justify-content: center;
120 | width: 100%;
121 | margin-bottom: 5px;
122 | max-width: 750px;
123 | }
124 |
125 | .chart-container {
126 | width: 70%;
127 | align-self: center;
128 | }
129 | #bar-chart-header {
130 | margin-right: 10px;
131 | font-family: KhulaBold;
132 | }
133 |
134 | #bar {
135 | margin-right: 20px;
136 | }
137 | .pie-container {
138 | margin-top: 15px;
139 | margin-left: 8px;
140 | }
141 |
142 | #cache-stats {
143 | flex: 2;
144 | border-radius: 15px;
145 | display: flex;
146 | justify-content: center;
147 | margin-top: 5px;
148 | width: 45%;
149 | max-width: 45%;
150 | max-height: 200px;
151 | }
152 |
153 | #cache-card {
154 | flex: 2;
155 | display: flex;
156 | flex-direction: column;
157 | background-color: rgb(217, 216, 216);
158 | width: 400px;
159 | min-width: 150px;
160 | height: 85%;
161 | border-radius: 15px;
162 | padding: 15px;
163 | border: 1px solid #162345;
164 | overflow: auto;
165 | }
166 |
167 | #cache-card h4 {
168 | margin-top: 0px;
169 | font-size: 18px;
170 | align-self: center;
171 | font-family: KhulaBold;
172 | }
173 |
174 | #cache-card p {
175 | margin-top: 0px;
176 | font-size: calc(12px + 0.2vw);
177 | margin-bottom: 7px;
178 | }
179 |
180 | #cache-times {
181 | display: flex;
182 | flex: 4;
183 | justify-content: center;
184 | width: 100%;
185 | max-width: 750px;
186 | margin-right: 20px;
187 | }
188 |
189 | #pie-chart {
190 | flex: 2;
191 | width: 100%;
192 | display: flex;
193 | justify-content: center;
194 | margin-bottom: 10px;
195 | }
196 |
197 | .input-container {
198 | display: flex;
199 | height: 400px;
200 | width: 95%;
201 | background-color: lightgray;
202 | padding: 20px;
203 | border-radius: 15px;
204 | margin: 10px 5px 15px 5px;
205 | box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
206 | }
207 |
208 | #query-fields {
209 | height: 100%;
210 | flex: 1;
211 | display: flex;
212 | flex-direction: column;
213 | align-items: start;
214 | justify-content: end;
215 | }
216 | #query-fields button {
217 | width: 100px;
218 | height: 40px;
219 | align-self: start;
220 | background-color: #162345;
221 | border-radius: 10px;
222 | color: white;
223 | margin-right: 10px;
224 | flex-shrink: inherit;
225 | }
226 |
227 | #checkboxes {
228 | display: flex;
229 | flex-direction: column;
230 | height: 270px;
231 | margin-top: 8px;
232 | }
233 |
234 | #checkboxes div select {
235 | margin-top: 0px;
236 | margin-bottom: 15px;
237 | }
238 |
239 | #idBox {
240 | margin-bottom: -5px;
241 | }
242 | #nested-checkbox {
243 | margin-left: 35px;
244 | }
245 |
246 | #query-fields button:hover {
247 | cursor: pointer;
248 | }
249 |
250 | #query-fields h1 {
251 | align-self: start;
252 | border-radius: 10px;
253 | color: #162345;
254 | margin-top: 10px;
255 | font-family: KhulaBold;
256 | }
257 |
258 | #query-fields p {
259 | align-self: start;
260 | border-radius: 10px;
261 | color: #162345;
262 | margin-top: 0px;
263 | margin-bottom: 10px;
264 | }
265 | #query-fields input {
266 | margin-top: 2px;
267 | margin-bottom: 12px;
268 | }
269 |
270 | #query-fields select {
271 | margin-bottom: 5px;
272 | width: 100px;
273 | }
274 |
275 | #query {
276 | background-color: rgb(53, 53, 53);
277 | height: 100%;
278 | border-radius: 15px;
279 | white-space: pre-line;
280 | width: 90%;
281 | }
282 | #graphql-query-container {
283 | display: flex;
284 | flex-direction: column;
285 | flex: 2;
286 | align-items: start;
287 | justify-content: start;
288 | margin-left: 20px;
289 | margin-top: -10px;
290 | }
291 | #graphql-query-container h3 {
292 | font-family: KhulaBold;
293 | }
294 | #query-results {
295 | background-color: rgb(53, 53, 53);
296 | height: 100%;
297 | border-radius: 15px;
298 | white-space: pre-line;
299 | overflow: auto;
300 | }
301 | #response-query-container {
302 | display: flex;
303 | flex-direction: column;
304 | flex: 2;
305 | margin-top: -10px;
306 | }
307 |
308 | #response-query-container h3 {
309 | font-family: KhulaBold;
310 | }
311 |
312 | .buttons {
313 | display: flex;
314 | width: 100%;
315 | }
316 |
317 | .underline {
318 | text-decoration: underline;
319 | }
320 |
321 | #root {
322 | margin-left: 0px;
323 | }
324 |
325 | #clear-cache {
326 | height: 80%;
327 | display: flex;
328 | align-items: end;
329 | margin: 10px;
330 | }
331 | #query-results button {
332 | display: flex;
333 | flex-direction: column;
334 | justify-content: end;
335 | align-items: flex-end;
336 | }
337 |
338 | .third-indent {
339 | text-indent: 125px;
340 | margin: 5px;
341 | }
342 |
343 | .second-indent {
344 | text-indent: 75px;
345 | margin: 5px;
346 | }
347 |
348 | .first-indent {
349 | text-indent: 25px;
350 | margin: 5px;
351 | }
352 |
353 | .query-text {
354 | color: yellow;
355 | font-size: 15px;
356 | font-family: "Source Code Pro Variable";
357 | margin-left: 40px;
358 | margin-top: 25px;
359 | }
360 |
361 | #query-tag {
362 | color: rgb(253, 88, 116);
363 | }
364 |
--------------------------------------------------------------------------------
/server/dashQL/dashCache.ts:
--------------------------------------------------------------------------------
1 | import { DocumentNode } from 'graphql';
2 |
3 | class dashCache {
4 | query: DocumentNode;
5 | redisdb: any;
6 | responseReady: boolean;
7 | totalHits: number;
8 | mapLength: number;
9 | nestedResponseCounter: number;
10 | map: Map
243 |
245 |
262 |
263 |
397 |
398 | );
399 | }
400 |
--------------------------------------------------------------------------------
dashQL Cache Demo
244 |
246 |
253 |
247 |
249 |
250 |
252 |
254 |
261 |
255 |
257 |
258 |
260 |
264 |
368 | Star Wars API
265 |Select the fields to query:
266 | 274 |
275 |
283 |
363 |
284 | {idBox ? (
285 | // only show id dropdown if id box is checked
286 | // can have a way to populate this field with more id's based on query selection
287 |
302 | ) : null}
303 |
304 |
312 | {idBox && (
313 |
321 | )}
322 | {idBox && (
323 |
331 | )}
332 | {idBox && (
333 |
341 | )}
342 | {(idBox && checkboxes[3] && currentFields === defaultFields) && (
343 |
351 | )}
352 | {(idBox && checkboxes[3] && currentFields === defaultFields) && (
353 |
361 | )}
362 |
364 |
365 |
366 |
367 |
369 |
380 | GraphQL Query
370 |
371 |
379 |
381 |
396 | Query Results
382 |
383 | {displayResults && (
384 |
395 |