Overhaul demo app and improve scaffolding

README.md

@@ -1,6 +1,7 @@
 # React Query to Redux
 
-Sync your [React Query](https://react-query.tanstack.com/overview) state to [Redux](https://redux.js.org/).
+Sync your [React Query](https://react-query.tanstack.com/overview) state to [Redux](https://redux.js.org/), and access
+React Query's records through selectors.
 
 [![npm version](https://img.shields.io/npm/v/reactquery-to-redux.svg)](https://www.npmjs.com/package/reactquery-to-redux)
 [![build status](https://github.com/spautz/reactquery-to-redux/workflows/CI/badge.svg)](https://github.com/spautz/reactquery-to-redux/actions)
@@ -11,3 +12,84 @@ Sync your [React Query](https://react-query.tanstack.com/overview) state to [Red
 ## STILL IN DEVELOPMENT
 
 This library is not yet ready for public use. Version 0.1.0 will be the first public release.
+
+## Usage
+
+`<SyncReactQueryToRedux />` syncs state from React Query to Redux. This is required.
+
+```typescript jsx
+import { SyncReactQueryToRedux } from 'reactquery-to-redux';
+
+<Provider store={store}>
+  <QueryClientProvider client={queryClient}>
+    <SyncReactQueryToRedux />
+    <MyApp />
+  </QueryClientProvider>
+</Provider>;
+```
+
+`reactQueryToReduxReducer` handles the sync actions: add it to your reducer.
+
+```typescript jsx
+import { reactQueryToReduxReducer } from 'reactquery-to-redux';
+
+const yourRootReducer = combineReducers({
+  ...yourOtherReducers,
+  reactQueryToRedux: reactQueryToReduxReducer,
+});
+
+const store = createStore(yourRootReducer);
+```
+
+Use selectors to access query and mutation state: these roughly correspond to React Query's hooks.
+
+Note: these are [Dynamic Selectors](https://github.com/spautz/dynamic-selectors), so they work like plain functions.
+To use them with [Reselect](https://github.com/reduxjs/reselect) selectors you must bind the `queryKey` using
+[reselectSelectorFromDynamic](https://github.com/spautz/dynamic-selectors/tree/main/packages/with-reselect#reselectselectorfromdynamicdynamicselector-params).
+
+```typescript jsx
+import {
+  selectQuery,
+  selectQueries,
+  selectInfiniteQuery,
+  selectMutation,
+  selectIsFetching,
+  selectIsMutating,
+} from 'reactquery-to-redux';
+
+const queryInfo = selectQuery(state, queryKey);
+// or, to combine with existing Reselect selectors
+const myReselectSelector = createSelector(
+  [reselectSelectorFromDynamic(selectQuery, queryKey), someOtherSelector],
+  (queryInfo, someOtherData) => {
+    /* ... */
+  },
+);
+```
+
+## Do I need this?
+
+You probably don't need this. React Query and Redux work fine side-by-side. You can already use values from React Query
+and Redux together in a component.
+
+This library is useful for accessing React Query state via a selector, or from outside of a React component -- such as
+[Redux-Saga](https://redux-saga.js.org/docs/About) or other tools that interact with Redux asynchronously.
+
+It can also facilitate a migration from Redux to React Query.
+
+## Options
+
+(TODO)
+
+## Demo
+
+(TODO)
+
+## React Query version compatibility
+
+| React Query | ReactQuery-to-Redux |
+| ----------: | ------------------: |
+|    `3.18.x` |        `UNRELEASED` |
+
+Other versions of React Query and ReactQuery-to-Redux may be compatible: this table just lists the thoroughly tested
+pairings.

demos/todo-list/.rescriptsrc.js

@@ -0,0 +1,51 @@
+const path = require('path');
+const resolveFrom = require('resolve-from');
+
+const packageJson = require('./package.json');
+
+console.log('packageJson = ', packageJson);
+
+function addAliasForLocalPackage(packageName) {
+  try {
+    const aliasName = `${packageName}\$`;
+    if (!aliases[aliasName]) {
+      aliases[aliasName] = resolveFrom(path.resolve('node_modules'), packageName);
+    }
+  } catch (e) {
+    // It's ok if we can't resolve: @types and bin packages (like react-scripts) don't have a main import
+  }
+}
+
+// ================================================================================================
+
+const aliases = {
+  'reactquery-to-redux$': resolveFrom(path.resolve('../..'), '.'),
+};
+
+console.log('aliases = ', aliases);
+
+Object.keys(packageJson.dependencies).map(addAliasForLocalPackage);
+Object.keys(packageJson.devDependencies).map(addAliasForLocalPackage);
+
+console.log('aliases = ', aliases);
+
+// Based on https://gist.github.com/tannerlinsley/4778cf30d66530ea9802899168119ec0
+const fixLinkedDependencies = (config) => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      ...aliases,
+    },
+  };
+  return config;
+};
+
+const allowOutsideSrc = (config) => {
+  config.resolve.plugins = config.resolve.plugins.filter(
+    (p) => p.constructor.name !== 'ModuleScopePlugin',
+  );
+  return config;
+};
+
+module.exports = [fixLinkedDependencies, allowOutsideSrc];

demos/from-reactquery-to-redux/create-react-app.md → demos/todo-list/create-react-app.md

@@ -44,27 +44,3 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `yarn build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

demos/from-reactquery-to-redux/package.json → demos/todo-list/package.json

@@ -1,24 +1,29 @@
 {
-  "name": "demo-from-reactquery-to-redux",
+  "name": "demo--todo-list",
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-query": "^3.18.1",
     "react-redux": "^7.2.4",
-    "react-scripts": "^4.0.3",
-    "redux": "^4.1.0",
+    "reactquery-to-redux": "next",
+    "redux": "^4.1.0"
+  },
+  "devDependencies": {
+    "@rescripts/cli": "^0.0.16",
+    "@rescripts/rescript-env": "^0.0.11",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test"
   },
   "eslintConfig": {
     "extends": [