├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── jsconfig.json
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── src
├── Helpers.js
├── SolidQueryDevtools.jsx
├── Tool.jsx
├── assets
│ ├── Demo.png
│ └── SquidLogo.png
└── index.css
└── vite.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | pnpm-lock.yaml
3 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 OSLabs Beta
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
13 | [](https://solidjs.com/)
14 | [](https://tanstack.com/query/latest)
15 |
16 |
17 |
18 | ## Table of Contents
19 | - [What is Solid Query Devkit?](#what-is-solid-query-dev-kit)
20 | - [Features](#features)
21 | - [How do I use it](#how-do-i-use-it)
22 | - [Show Your Support](#show-your-support)
23 | - [License](#license)
24 | - [Team](#team)
25 |
26 | ## What is Solid Query Devkit?
27 | Solid Query Devkit is an open source developer tool for Solid Query that allows developers to view and explore query data and metadata while providing additional functionality to the query cache like manual refetching, invalidating, and removing.
28 |
29 | ## Features
30 | - Inspect query status, data, and metadata
31 | - Refetch, reset, remove, and invalidate queries
32 | - Sort queries by query hash, query status, and last updated
33 |
34 | ## How do I use it
35 | - NPM install this package into a SolidJS project that uses Tanstack Solid Query.
36 | - import SolidQueryDevkit from 'solid-query-devkit' into the file where you're wrapping your application with the < QueryClientProvider >
37 | - mount < SolidQueryDevkit /> as high in your app as your can - the closer it is to the root of the page, the better!
38 | - just ensure that the < SolidQueryDevkit /> component is inside of the Solid Query < QueryClientProvider > wrapper
39 |
40 | {props.key}: {boolean}
31 | )
32 | }
33 | const Number = (props) => {
34 | return (
35 | {props.key}: {parseInt(props.value)}
36 | )
37 | }
38 | const String = (props) => {
39 | return (
40 | {props.key}: "{props.value}"
41 | )
42 | }
43 | const Null = (props) => {
44 | return (
45 | {props.key}: null
46 | )
47 | }
48 | const Undefined = (props) => {
49 | return (
50 | {props.key}: undefined
51 | )
52 | }
53 |
54 | const options = {
55 | string: String,
56 | boolean: Boolean,
57 | number: Number,
58 | undefined: Undefined,
59 | null: Null
60 | }
61 | return(
62 |
72 | setEnabled(!enabled())}>
73 | {!enabled() ? '\u25B6' : '\u25BC'} {props.key}
74 |
75 | {Array.isArray(props.obj) ? `[${props.obj.length} items]` : `{${Object.keys(props.obj).length} item${Object.keys(props.obj).length > 1 ? 's' : ''}}`}
76 |
77 |
78 |
79 |
80 |
81 |
82 | {(key) =>
83 |
84 |
85 |
87 |
88 |
90 |
91 | }
92 |
93 |
94 |
95 |
96 | )
97 | }
98 |
99 |
100 | function Header() {
101 |
102 | //Style Variables for Status Backgrounds:
103 | //Loading
104 | const noneLoading = { "background-color": "rgb(14, 46, 96)", "color": "rgb(89, 98, 109)" };
105 | const noneLoadingFiltered = { "background-color": "rgb(14, 46, 96)", "color": "rgb(89, 98, 109)", "border": "0.2em solid white" };
106 | const someLoading = { "background-color": "blue", "color": "white" };
107 | const someLoadingFiltered = { "background-color": "blue", "color": "white", "border": "0.2em solid white" };
108 | //Fresh
109 | const noneFresh = { "background-color": "rgb(16, 66, 53)", "color": "rgb(89, 98, 109)" };
110 | const noneFreshFiltered = { "background-color": "rgb(16, 66, 53)", "color": "rgb(89, 98, 109)", "border": "0.2em solid white" };
111 | const someFresh = { "background-color": "green", "color": "white" };
112 | const someFreshFiltered = { "background-color": "green", "color": "white", "border": "0.2em solid white" };
113 | //Paused
114 | const nonePaused = { "background-color": "rgba(60,46,109)", "color": "white", "opacity": "0.3" };
115 | const nonePausedFiltered = { "background-color": "rgba(60,46,109)", "color": "rgb(89, 98, 109)", "border": "0.2em solid white" };
116 | const somePaused = { "background-color": "rgb(140, 73, 235)", "color": "white" };
117 | const somePausedFiltered = { "background-color": "rgb(140, 73, 235)", "color": "white", "border": "0.2em solid white" };
118 | //Stale
119 | const noneStale = { "background-color": "rgb(204, 150, 49)", "color": "rgb(89, 98, 109)" };
120 | const noneStaleFiltered = { "background-color": "rgb(204, 150, 49)", "color": "rgb(89, 98, 109)", "border": "0.2em solid white" };
121 | const someStale = { "background-color": "rgb(255, 169, 8)", "color": "black" };
122 | const someStaleFiltered = { "background-color": "rgb(255, 169, 8)", "color": "black", "border": "0.2em solid white" };
123 | //Inactive
124 | const noneInactive = { "background-color": "rgb(63, 78, 96)", "opacity": "0.3" };
125 | const noneInactiveFiltered = { "background-color": "rgb(35,48,67)", "border": "0.2em solid white", "color": "rgb(89, 98, 109)" };
126 | const someInactive = { "background-color": "rgb(63, 78, 96)", "color": "white" };
127 | const someInactiveFiltered = { "background-color": "rgb(63, 78, 96)", "color": "white", "border": "0.2em solid white" };
128 |
129 |
130 | //Styles for Heading display
131 | const fullDisplay = {"display": "flex", "align-items": "center"}
132 | const halfDisplay = {"display": "flex", "justify-content": "space-between", "align-items": "center"}
133 | const infoContainer = {"display": "flex", "flex-direction": "column", "align-items": "center", "justify-content": "space-between"}
134 | const sortOptions = {"display": "flex", "justify-content": "space-around", "width": "100%", "margin": "0.5em 0"}
135 |
136 | // checker functions that are passed into the styler function
137 |
138 | const queryStatuses = () => {
139 | const statuses = {
140 | fresh: 0,
141 | fetching: 0,
142 | paused: 0,
143 | stale: 0,
144 | inactive: 0
145 | }
146 | queries().forEach((query) => {
147 | const status = getQueryStatus(query);
148 | statuses[status]++
149 | })
150 |
151 | return statuses
152 | }
153 |
154 | // function to be invoked on status button click
155 | const applyStatusFilter = (buttonStatus) => {
156 | if (filter().status === buttonStatus) setFilter({...filter(), status: ''});
157 | else if (filter().status !== buttonStatus) setFilter({...filter(), status: buttonStatus});
158 | }
159 |
160 | // styler functions to be invoked inside the style attribute of the status buttons
161 | const styler = (checkerFunc, buttonStatus, stylingForSome, stylingForNone, stylingForSomeFiltered, stylingForNoneFiltered) => {
162 | if (checkerFunc && filter().status !== buttonStatus) return stylingForSome;
163 | if (!checkerFunc && filter().status !== buttonStatus) return stylingForNone;
164 | if (checkerFunc && filter().status === buttonStatus) { return stylingForSomeFiltered;}
165 | else return stylingForNoneFiltered;
166 | }
167 |
168 | return (
169 |
192 | )
193 | }
194 |
195 | function QueryKeyList(props) {
196 |
197 | const derivedQueries = () => {
198 | return sort().reverse ?
199 | filterQueries(sortQueries(queries(), sort().type), filter()).reverse()
200 | : filterQueries(sortQueries(queries(), sort().type), filter())
201 | }
202 |
203 | return (
204 |
205 | {/* For each query, render a SingleKey component, passing down the necessary information from the query cache as props */}
206 |
207 | {(query, i) => {
208 | return
214 |
215 | );
216 | };
217 |
218 | function Explorer(props) {
219 | return (
220 | <>
221 |
224 |
225 |
226 |
227 |
228 | )
229 |
230 | }
231 |
232 |
233 | function ActiveQuery() {
234 |
235 |
236 |
237 | const queryFunctions = {
238 | refetch: () => {
239 | queryClient.refetchQueries({ queryKey: JSON.parse(activeQuery().queryHash) });
240 | },
241 | invalidate: async () => {
242 | await queryClient.invalidateQueries({
243 | queryKey: JSON.parse(activeQuery().queryHash),
244 | exact: true,
245 | refetchType: 'active',
246 | });
247 | },
248 | reset: () => {
249 | queryClient.resetQueries({ queryKey: JSON.parse(activeQuery().queryHash) });
250 | },
251 | remove: () => {
252 | const hash = JSON.parse(activeQuery().queryHash)
253 | setActiveQuery();
254 | queryClient.removeQueries({ queryKey: hash, exact: true });
255 | }
256 | }
257 |
258 | return (
259 |
260 |
261 |
263 |
264 |
267 |
268 | Refetch
269 | Invalidate
270 | Reset
271 | Remove
272 |
273 |
274 |
275 |
277 |
278 |
279 |
280 |
281 |
282 | )
283 |
284 | }
285 |
286 | function OverviewData() {
287 |
288 | const queryStatus = () => getQueryStatus(queries().find(query => query.queryHash === activeQuery().queryHash));
289 | const queryArr = () => JSON.parse(activeQuery().queryHash);
290 |
291 | const statusStyles = {
292 | fetching: "background-color:blue; color:white",
293 | paused: "background-color:rgb(140, 73, 235); color:white",
294 | fresh: "background-color:green; color:white",
295 | stale: "background-color:rgb(255, 169, 8); color:black",
296 | inactive: "background-color:gray; color:white",
297 | }
298 |
299 | function normalTime() {
300 | const unixTime = activeQuery().state.dataUpdatedAt;
301 | if (unixTime === 0) return 'Not yet updated';
302 | const date = new Date(unixTime)
303 | return date.toLocaleTimeString()
304 | }
305 |
306 | return (
307 | <>
308 |
311 |
312 |
313 |
314 |
{'['}
315 |
316 | {(el, i) => {
317 | let comma = ',';
318 | if (i() === queryArr().length - 1) comma = '';
319 | if (typeof el === 'string') {
320 | return {`\"${el}\"${comma}`}
321 | }
322 | else return {el}{comma}
323 | }}
324 |
325 |
{']'}
326 |
327 |
{queryStatus()}
328 |
329 |
330 | Observers:
331 | {activeQuery().observers.length}
332 |
333 |
334 | Last Updated At:
335 | {normalTime()}
336 |
337 |
363 | {query().observers.length}
364 | {
365 | setBackgroundColor({
366 | "background-color": 'rgba(13, 21, 32, 0.5)'
367 | });
368 | if (activeQuery() == undefined || activeQuery().queryHash !== props.key) {
369 | setActiveQuery(query());
370 | } else {
371 | setActiveQuery(undefined);
372 | }
373 | }
374 | }>
375 | {query().queryHash}
376 |
377 |
378 | );
379 | };
380 |
381 | export default function Tool(props) {
382 |
383 | queryClient = useQueryClient(props.queryClient);
384 |
385 | //subscribing to the query cache, which runs the function every time the queryCache updates
386 | queryClient.queryCache.subscribe(() => {
387 | setQueries(() => [...queryClient.queryCache.queries]);
388 | if (activeQuery()) {
389 | setActiveQuery({...queries().filter((query) => query.queryHash == activeQuery().queryHash)[0]});
390 | };
391 | });
392 |
393 | // IDEA: repurpose viewWidth signal to contain either an empty string at initialization,
394 | // or a string with a class/id identifier (e.g., "responsive")
395 | // whatever that signal is will be added via brackets as an attribute on the left container div,
396 | // but only conditionally, based on the create effect below.
397 |
398 | const viewWidth = () => activeQuery() ? 'sqd-narrow' : 'sqd-wide'
399 |
400 | return (
401 | <>
402 |
403 |
404 |
405 | {/* Header */}
406 |
407 |
408 |
409 |
410 |
412 |
413 |
414 |
419 |
420 |
422 |
423 |
424 | {
425 | setShowModal(true);
426 | }}>
427 |
429 |
430 |
431 |
432 | );
433 | };
434 |
435 |
436 |
--------------------------------------------------------------------------------
/src/assets/Demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/solid-query-devkit/82ef0f11f3136bad70e0e287f68a4a4880fdcc8f/src/assets/Demo.png
--------------------------------------------------------------------------------
/src/assets/SquidLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/solid-query-devkit/82ef0f11f3136bad70e0e287f68a4a4880fdcc8f/src/assets/SquidLogo.png
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | .sqd-modal {
2 | background-color: rgb(13, 21, 32);
3 | height: 100%;
4 | min-height: 25vh;
5 | position: fixed;
6 | width: 100%;
7 | inset: 50vh 0 0 0;
8 | z-index: 9999;
9 | resize: vertical;
10 | display: flex;
11 | border-style: none;
12 | border-top: solid rgba(5, 5, 50, 0.645);
13 | box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
14 | }
15 |
16 | #sqd-showModal {
17 | background-color: Transparent;
18 | background-repeat: no-repeat;
19 | border: none;
20 | position: fixed;
21 | height: 75px;
22 | width: 75px;
23 | bottom: 3%;
24 | right: 2%;
25 | z-index: 9999;
26 | }
27 |
28 |
29 | .sqd-closeModal:hover {
30 | background-color: rgb(83, 69, 69);
31 | cursor: pointer;
32 | }
33 |
34 | #sqd-showModal:hover {
35 | cursor: pointer;
36 | }
37 |
38 | .sqd-outerContainer {
39 | display: flex;
40 | flex-direction: row;
41 | height: 50%;
42 | }
43 |
44 | .sqd-leftContainer {
45 | overflow-y: scroll;
46 | }
47 |
48 | #sqd-narrow {
49 | width: 50vw;
50 | }
51 |
52 | #sqd-wide {
53 | width: 100vw;
54 | }
55 |
56 | .sqd-rightContainer {
57 | width: 50vw;
58 | height: 99%;
59 | border-left: solid rgba(33 39 55) 2px;
60 | overflow-y: scroll;
61 | }
62 |
63 |
64 | .sqd-header {
65 | background-color: rgb(23, 35, 53);
66 | color: white;
67 | padding: 15px;
68 | display: flex;
69 | justify-content: space-between;
70 | position: sticky;
71 | top: 0%;
72 | }
73 |
74 | .sqd-queries {
75 | font-size: 1em;
76 | }
77 |
78 | .sqd-statusGrid {
79 | display: flex;
80 | flex-direction: row;
81 | justify-content: space-between;
82 | align-items: center;
83 | margin: 0.5em 0;
84 | }
85 |
86 | .sqd-statusGrid:hover {
87 | cursor: pointer;
88 | }
89 |
90 | .sqd-statusBtn {
91 | font-size: 0.8em;
92 | margin: 0 5px;
93 | padding: 0.4em;
94 | font-weight: bolder;
95 | border-radius: 5px;
96 | text-align: center;
97 | }
98 |
99 | .sqd-ascBtn {
100 | border-radius: 5px;
101 | color: white;
102 | background-color: rgb(99, 95, 95);
103 | font-weight: bolder;
104 | padding: 0.4em 0.4em;
105 | border: none;
106 | }
107 |
108 | .sqd-ascBtn:hover {
109 | cursor: pointer;
110 | }
111 |
112 | #sqd-activeQuery {
113 | display: flex;
114 | flex-direction: column;
115 | color: white;
116 | text-align: left;
117 | }
118 |
119 | .sqd-detailsHeader {
120 | background-color: rgb(23, 35, 53);
121 | color: white;
122 | position: sticky;
123 | top: 0%;
124 | padding: 0.2em 0;
125 | }
126 |
127 | .sqd-object-component {
128 | margin: 1em 0;
129 | }
130 |
131 | .sqd-detailsHeader h3 {
132 | padding: 0.2em 0;
133 | margin: 0 0.5em;
134 | }
135 |
136 | .sqd-queryActionsButtons {
137 | padding: 10px;
138 | }
139 |
140 | #sqd-refetch {
141 | background-color: rgba(45 105 246);
142 | color: white;
143 | font-weight: bold;
144 | border-radius: 5px;
145 | border: none;
146 | margin: 2px;
147 | }
148 |
149 | #sqd-invalidate {
150 | background-color: rgba(241 179 62);
151 | color: black;
152 | font-weight: bold;
153 | border-radius: 5px;
154 | border: none;
155 | margin: 2px;
156 | }
157 |
158 | #sqd-reset {
159 | background-color: rgb(63, 78, 96);
160 | color: white;
161 | font-weight: bold;
162 | border-radius: 5px;
163 | border: none;
164 | margin: 2px;
165 | }
166 |
167 | #sqd-remove {
168 | background-color: rgba(234 51 132);
169 | color: white;
170 | font-weight: bold;
171 | border-radius: 5px;
172 | border: none;
173 | margin: 2px;
174 | }
175 |
176 | .sqd-main {
177 | display: flex;
178 | flex-direction: column;
179 | }
180 |
181 | .sqd-queryKey {
182 | display: flex;
183 | cursor: pointer;
184 | }
185 |
186 | .sqd-observers {
187 | display: flex;
188 | justify-content: center;
189 | width: 5vw;
190 | height: 5vh;
191 | color: black;
192 | align-items: center;
193 | border: solid black 1px;
194 | }
195 |
196 | #sqd-singleKey {
197 | background-color: rgb(13, 21, 32, .8);
198 | width: 100vw;
199 | border: solid rgba(33 39 55) 1px;
200 | display: flex;
201 | align-items: center;
202 | color: white;
203 | }
204 |
205 | @media (max-width: 1250px) {
206 |
207 | .sqd-outerContainer {
208 | display: flex;
209 | flex-direction: column;
210 | width: 100vw;
211 | }
212 |
213 | .sqd-rightContainer {
214 | width: 100vw;
215 | height: 40%;
216 | }
217 |
218 | #sqd-narrow {
219 | width: 100vw;
220 | height: 60%;
221 | }
222 |
223 | }
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import solidPlugin from 'vite-plugin-solid';
3 | import { resolve } from 'path';
4 |
5 | export default defineConfig({
6 | plugins: [solidPlugin()],
7 | server: {
8 | port: 3000,
9 | },
10 | build: {
11 | target: 'esnext',
12 | lib: {
13 | entry: resolve(__dirname, './src/SolidQueryDevtools.jsx'),
14 | name: 'solid-query-devkit'
15 | },
16 | },
17 | rollupOptions: {
18 | input: './src/SolidQueryDevtools.jsx',
19 | external: ['solid-js', '@tanstack/solid-query', 'path']
20 | }
21 | });
--------------------------------------------------------------------------------
4 | 
42 |