+ {`toggleVisibilityKey="ctrl-h"\nchangePositionKey="ctrl-q"`}
+
+ + +### Development + +#### Start Demo + +```bash +yarn lerna run start --stream --scope @redux-devtools/rtk-query-monitor +``` + +
+ +## License + +[MIT](./LICENSE.md) diff --git a/packages/redux-devtools-rtk-query-monitor/demo/.babelrc b/packages/redux-devtools-rtk-query-monitor/demo/.babelrc new file mode 100644 index 00000000..7a337702 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/.babelrc @@ -0,0 +1,11 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react", + "@babel/preset-typescript" + ], + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] +} diff --git a/packages/redux-devtools-rtk-query-monitor/demo/.eslintrc.js b/packages/redux-devtools-rtk-query-monitor/demo/.eslintrc.js new file mode 100644 index 00000000..846c0db8 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['react-app'], +}; diff --git a/packages/redux-devtools-rtk-query-monitor/demo/.gitignore b/packages/redux-devtools-rtk-query-monitor/demo/.gitignore new file mode 100644 index 00000000..1033f53c --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/.gitignore @@ -0,0 +1,4 @@ +.snowpack +build +node_modules +.yarn/* \ No newline at end of file diff --git a/packages/redux-devtools-rtk-query-monitor/demo/config/tsconfig.json b/packages/redux-devtools-rtk-query-monitor/demo/config/tsconfig.json new file mode 100644 index 00000000..7fd5a7b8 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/config/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../../../tsconfig.base.json", + "compilerOptions": { + "resolveJsonModule": true + }, + "include": ["webpack.config.ts"] +} diff --git a/packages/redux-devtools-rtk-query-monitor/demo/config/webpack.config.ts b/packages/redux-devtools-rtk-query-monitor/demo/config/webpack.config.ts new file mode 100644 index 00000000..62e1db9b --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/config/webpack.config.ts @@ -0,0 +1,88 @@ +import * as path from 'path'; +import * as webpack from 'webpack'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import { CleanWebpackPlugin } from 'clean-webpack-plugin'; +import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; +import * as pkg from '../../package.json'; +const CopyWebpackPlugin = require('copy-webpack-plugin'); +const isProduction = process.env.NODE_ENV === 'production'; + +const demoSrc = path.join(__dirname, '../src'); +const libSrc = path.join(__dirname, '../../src'); +const publicDir = path.join(__dirname, '../public'); + +module.exports = { + mode: process.env.NODE_ENV || 'development', + entry: isProduction + ? ['./demo/src/index'] + : [ + 'webpack-dev-server/client?http://localhost:3000', + 'webpack/hot/only-dev-server', + './demo/src/index', + ], + output: { + path: path.join(__dirname, '../dist'), + filename: isProduction ? '[name].[contenthash:8].js' : 'js/bundle.js', + }, + module: { + rules: [ + { + test: /\.(js|ts)x?$/, + loader: 'babel-loader', + exclude: /node_modules/, + include: [demoSrc, libSrc], + }, + { + test: /\.css?$/, + loaders: ['style-loader', 'css-loader'], + include: demoSrc, + }, + ], + }, + resolve: { + modules: ['node_modules', demoSrc], + extensions: ['.js', '.jsx', '.ts', '.tsx'], + }, + optimization: { + minimize: isProduction, + }, + plugins: [ + new CleanWebpackPlugin(), + new HtmlWebpackPlugin({ + inject: true, + template: 'demo/public/index.html', + package: pkg, + }), + new CopyWebpackPlugin({ + patterns: [ + { + from: 'demo/public/assets/*.js', + to: ({ absoluteFilename }: any) => { + return `./${path.basename(absoluteFilename)}`; + }, + globOptions: { + ignore: ['*.DS_Store'], + }, + }, + ], + }), + new ForkTsCheckerWebpackPlugin({ + typescript: { + configFile: 'demo/tsconfig.json', + }, + }), + ].concat(isProduction ? [] : [new webpack.HotModuleReplacementPlugin()]), + devServer: isProduction + ? {} + : { + quiet: false, + port: 3000, + hot: true, + stats: { + chunkModules: false, + colors: true, + }, + historyApiFallback: true, + }, + devtool: isProduction ? 'source-map' : 'cheap-module-source-map', +}; diff --git a/packages/redux-devtools-rtk-query-monitor/demo/public/assets/mockServiceWorker.js b/packages/redux-devtools-rtk-query-monitor/demo/public/assets/mockServiceWorker.js new file mode 100644 index 00000000..51e26799 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/public/assets/mockServiceWorker.js @@ -0,0 +1,322 @@ +/** + * Mock Service Worker. + * @see https://github.com/mswjs/msw + * - Please do NOT modify this file. + * - Please do NOT serve this file on production. + */ +/* eslint-disable */ +/* tslint:disable */ + +const INTEGRITY_CHECKSUM = '82ef9b96d8393b6da34527d1d6e19187' +const bypassHeaderName = 'x-msw-bypass' +const activeClientIds = new Set() + +self.addEventListener('install', function () { + return self.skipWaiting() +}) + +self.addEventListener('activate', async function (event) { + return self.clients.claim() +}) + +self.addEventListener('message', async function (event) { + const clientId = event.source.id + + if (!clientId || !self.clients) { + return + } + + const client = await self.clients.get(clientId) + + if (!client) { + return + } + + const allClients = await self.clients.matchAll() + + switch (event.data) { + case 'KEEPALIVE_REQUEST': { + sendToClient(client, { + type: 'KEEPALIVE_RESPONSE', + }) + break + } + + case 'INTEGRITY_CHECK_REQUEST': { + sendToClient(client, { + type: 'INTEGRITY_CHECK_RESPONSE', + payload: INTEGRITY_CHECKSUM, + }) + break + } + + case 'MOCK_ACTIVATE': { + activeClientIds.add(clientId) + + sendToClient(client, { + type: 'MOCKING_ENABLED', + payload: true, + }) + break + } + + case 'MOCK_DEACTIVATE': { + activeClientIds.delete(clientId) + break + } + + case 'CLIENT_CLOSED': { + activeClientIds.delete(clientId) + + const remainingClients = allClients.filter((client) => { + return client.id !== clientId + }) + + // Unregister itself when there are no more clients + if (remainingClients.length === 0) { + self.registration.unregister() + } + + break + } + } +}) + +// Resolve the "master" client for the given event. +// Client that issues a request doesn't necessarily equal the client +// that registered the worker. It's with the latter the worker should +// communicate with during the response resolving phase. +async function resolveMasterClient(event) { + const client = await self.clients.get(event.clientId) + + if (client.frameType === 'top-level') { + return client + } + + const allClients = await self.clients.matchAll() + + return allClients + .filter((client) => { + // Get only those clients that are currently visible. + return client.visibilityState === 'visible' + }) + .find((client) => { + // Find the client ID that's recorded in the + // set of clients that have registered the worker. + return activeClientIds.has(client.id) + }) +} + +async function handleRequest(event, requestId) { + const client = await resolveMasterClient(event) + const response = await getResponse(event, client, requestId) + + // Send back the response clone for the "response:*" life-cycle events. + // Ensure MSW is active and ready to handle the message, otherwise + // this message will pend indefinitely. + if (client && activeClientIds.has(client.id)) { + ;(async function () { + const clonedResponse = response.clone() + sendToClient(client, { + type: 'RESPONSE', + payload: { + requestId, + type: clonedResponse.type, + ok: clonedResponse.ok, + status: clonedResponse.status, + statusText: clonedResponse.statusText, + body: + clonedResponse.body === null ? null : await clonedResponse.text(), + headers: serializeHeaders(clonedResponse.headers), + redirected: clonedResponse.redirected, + }, + }) + })() + } + + return response +} + +async function getResponse(event, client, requestId) { + const { request } = event + const requestClone = request.clone() + const getOriginalResponse = () => fetch(requestClone) + + // Bypass mocking when the request client is not active. + if (!client) { + return getOriginalResponse() + } + + // Bypass initial page load requests (i.e. static assets). + // The absence of the immediate/parent client in the map of the active clients + // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet + // and is not ready to handle requests. + if (!activeClientIds.has(client.id)) { + return await getOriginalResponse() + } + + // Bypass requests with the explicit bypass header + if (requestClone.headers.get(bypassHeaderName) === 'true') { + const cleanRequestHeaders = serializeHeaders(requestClone.headers) + + // Remove the bypass header to comply with the CORS preflight check. + delete cleanRequestHeaders[bypassHeaderName] + + const originalRequest = new Request(requestClone, { + headers: new Headers(cleanRequestHeaders), + }) + + return fetch(originalRequest) + } + + // Send the request to the client-side MSW. + const reqHeaders = serializeHeaders(request.headers) + const body = await request.text() + + const clientMessage = await sendToClient(client, { + type: 'REQUEST', + payload: { + id: requestId, + url: request.url, + method: request.method, + headers: reqHeaders, + cache: request.cache, + mode: request.mode, + credentials: request.credentials, + destination: request.destination, + integrity: request.integrity, + redirect: request.redirect, + referrer: request.referrer, + referrerPolicy: request.referrerPolicy, + body, + bodyUsed: request.bodyUsed, + keepalive: request.keepalive, + }, + }) + + switch (clientMessage.type) { + case 'MOCK_SUCCESS': { + return delayPromise( + () => respondWithMock(clientMessage), + clientMessage.payload.delay, + ) + } + + case 'MOCK_NOT_FOUND': { + return getOriginalResponse() + } + + case 'NETWORK_ERROR': { + const { name, message } = clientMessage.payload + const networkError = new Error(message) + networkError.name = name + + // Rejecting a request Promise emulates a network error. + throw networkError + } + + case 'INTERNAL_ERROR': { + const parsedBody = JSON.parse(clientMessage.payload.body) + + console.error( + `\ +[MSW] Request handler function for "%s %s" has thrown the following exception: + +${parsedBody.errorType}: ${parsedBody.message} +(see more detailed error stack trace in the mocked response body) + +This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error. +If you wish to mock an error response, please refer to this guide: https://mswjs.io/docs/recipes/mocking-error-responses\ +`, + request.method, + request.url, + ) + + return respondWithMock(clientMessage) + } + } + + return getOriginalResponse() +} + +self.addEventListener('fetch', function (event) { + const { request } = event + + // Bypass navigation requests. + if (request.mode === 'navigate') { + return + } + + // Opening the DevTools triggers the "only-if-cached" request + // that cannot be handled by the worker. Bypass such requests. + if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') { + return + } + + // Bypass all requests when there are no active clients. + // Prevents the self-unregistered worked from handling requests + // after it's been deleted (still remains active until the next reload). + if (activeClientIds.size === 0) { + return + } + + const requestId = uuidv4() + + return event.respondWith( + handleRequest(event, requestId).catch((error) => { + console.error( + '[MSW] Failed to mock a "%s" request to "%s": %s', + request.method, + request.url, + error, + ) + }), + ) +}) + +function serializeHeaders(headers) { + const reqHeaders = {} + headers.forEach((value, name) => { + reqHeaders[name] = reqHeaders[name] + ? [].concat(reqHeaders[name]).concat(value) + : value + }) + return reqHeaders +} + +function sendToClient(client, message) { + return new Promise((resolve, reject) => { + const channel = new MessageChannel() + + channel.port1.onmessage = (event) => { + if (event.data && event.data.error) { + return reject(event.data.error) + } + + resolve(event.data) + } + + client.postMessage(JSON.stringify(message), [channel.port2]) + }) +} + +function delayPromise(cb, duration) { + return new Promise((resolve) => { + setTimeout(() => resolve(cb()), duration) + }) +} + +function respondWithMock(clientMessage) { + return new Response(clientMessage.payload.body, { + ...clientMessage.payload, + headers: clientMessage.payload.headers, + }) +} + +function uuidv4() { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { + const r = (Math.random() * 16) | 0 + const v = c == 'x' ? r : (r & 0x3) | 0x8 + return v.toString(16) + }) +} diff --git a/packages/redux-devtools-rtk-query-monitor/demo/public/index.html b/packages/redux-devtools-rtk-query-monitor/demo/public/index.html new file mode 100644 index 00000000..8422ab87 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/public/index.html @@ -0,0 +1,27 @@ + + + + + + +
+ {error ? (
+ <>Oh no, there was an error loading {name}
+ ) : isLoading ? (
+ <>Loading...
+ ) : data ? (
+ <>
+
+ );
+}
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/PokemonView.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/PokemonView.tsx
new file mode 100644
index 00000000..c7fda221
--- /dev/null
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/PokemonView.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Pokemon } from './Pokemon';
+import { PokemonName, POKEMON_NAMES } from '../../pokemon.data';
+import { Flex, Heading, Button } from '@chakra-ui/react';
+
+const getRandomPokemonName = () =>
+ POKEMON_NAMES[Math.floor(Math.random() * POKEMON_NAMES.length)];
+
+export default function PokemonView() {
+ const [pokemon, setPokemon] = React.useState{data.species.name}
+
+ 
+
+
+
+
+
+
+
+
+
+ ) : (
+ 'No Data'
+ )}
+
+ {pokemon.map((name, index) => (
+
+ {JSON.stringify(post, null, 2)}
+ Loading...
;
+ }
+
+ if (!post) {
+ return (
+ Loading
;
+ }
+
+ if (!posts) {
+ return No posts :(
;
+ }
+
+ return (
+ -
+ {posts.map(({ id, name }) => (
+
+ No rtk-query api found.
+
+ Make sure to follow{' '} + + the instructions + + . +
+ )}
+ + Make sure to follow{' '} + + the instructions + + . +
-
+ {resInfos.map((resInfo) => {
+ const isSelected = isQuerySelected(selectedQueryKey, resInfo);
+
+ return (
+
- onSelectQuery(resInfo)}
+ {...styling(
+ ['queryListItem', isSelected && 'queryListItemSelected'],
+ isSelected
+ )}
+ >
+
+ {QueryList.formatQuery(resInfo)} +
++ + {resInfo.type === 'query' ? 'Q' : 'M'} + ++{resInfo.state.status}
+
+ );
+ })}
+
+
+ )}
+
+ {tabs.map((tab) => (
+
+ this.handleTabClick(tab)}
+ key={tab.value}
+ {...styling(
+ [
+ 'selectorButton',
+ tab.value === selectedTab && 'selectorButtonSelected',
+ ],
+ tab.value === selectedTab
+ )}
+ >
+
+ {renderTabLabel ? renderTabLabel(tab) : tab.label}
+
+
+ ))}
+
+ {before}
+
+ );
+ }}
+
+
+ isTabVisible(tab, 'default')
+ ) as ReadonlyArray<
+ TabOption<
+ QueryPreviewTabs,
+ unknown,
+ RtkResourceInfo['type']
+ >
+ >
+ }
+ renderTabLabel={this.renderTabLabel}
+ />
+ {hasNoApis &&
+ )}
+
+
+ isTabVisible(tab, resInfo.type)
+ ) as ReadonlyArray<
+ TabOption<
+ QueryPreviewTabs,
+ unknown,
+ RtkResourceInfo['type']
+ >
+ >
+ }
+ renderTabLabel={this.renderTabLabel}
+ />
+
+ );
+ }}
+
+
+ selectorsSource={this.state.selectorsSource}
+ selectors={this.selectors}
+ resInfo={currentResInfo}
+ selectedTab={selectorsSource.monitorState.selectedPreviewTab}
+ onTabChange={this.handleTabChange}
+ styling={styling}
+ isWideLayout={isWideLayout}
+ hasNoApis={hasNoApi}
+ />
+
+ );
+ }
+}
+
+export default RtkQueryInspector;
diff --git a/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx b/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx
new file mode 100644
index 00000000..3d90c715
--- /dev/null
+++ b/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx
@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Action, AnyAction } from 'redux';
+import RtkQueryInspector from './RtkQueryInspector';
+import { reducer } from '../reducers';
+import {
+ ExternalProps,
+ RtkQueryMonitorProps,
+ RtkQueryMonitorState,
+ StyleUtils,
+} from '../types';
+import {
+ createThemeState,
+ StyleUtilsContext,
+} from '../styles/createStylingFromTheme';
+
+interface DefaultProps {
+ theme: string;
+ invertTheme: boolean;
+}
+
+export interface RtkQueryComponentState {
+ readonly styleUtils: StyleUtils;
+}
+
+class RtkQueryMonitor
+
+ ;
+}
+
+/**
+ * It is Omit