(SPEED-1427): обновляет react-query

cypress/support/commands.ts

@@ -17,3 +17,5 @@ Cypress.Commands.add('start', () => {
 
     cy.visit('/').window().its('AssistantClient');
 });
+
+export {};

package.json

@@ -32,9 +32,11 @@
     "@salutejs/plasma-icons": "1.118.0",
     "@salutejs/plasma-tokens": "1.32.0",
     "@salutejs/plasma-ui": "1.159.0",
-    "@salutejs/scenario": "0.39.1",
+    "@salutejs/scenario": "1.1.0",
     "@salutejs/spatial": "3.0.1",
     "@salutejs/storage-adapter-memory": "0.39.1",
+    "@tanstack/react-query": "5.29.2",
+    "@tanstack/react-query-devtools": "5.29.2",
     "next": "13.1.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -50,7 +52,7 @@
     "@types/styled-components": "5.1.26",
     "@typescript-eslint/eslint-plugin": "5.48.2",
     "@typescript-eslint/parser": "5.48.2",
-    "auto": "10.36.5",
+    "auto": "11.1.6",
     "babel-eslint": "10.1.0",
     "cross-env": "7.0.3",
     "cypress": "11.1.0",
@@ -79,7 +81,7 @@
     "stylelint-order": "4.0.0",
     "stylelint-processor-styled-components": "1.10.0",
     "stylelint-scss": "3.17.1",
-    "typescript": "4.3.5"
+    "typescript": "4.9.5"
   },
   "publishConfig": {
     "access": "public"

src/components/PageNote.tsx

@@ -20,7 +20,8 @@ type Props = {
 
 export const PageNote = ({ noteFilter, title = '', nextPageUrl }: Props) => {
     const { push, back } = useRouter();
-    const { data: notes = [], isLoading, isIdle } = useInitialNotes();
+    const { data: notes = [], isInitialLoading, fetchStatus } = useInitialNotes();
+    const isIdle = fetchStatus === 'idle';
     const filteredNotes = notes.filter(noteFilter);
     const basePath = useBasePath();
     const [sectionProps] = useSection('NoteSection');
@@ -68,7 +69,7 @@ export const PageNote = ({ noteFilter, title = '', nextPageUrl }: Props) => {
                     addNote(note);
                     setNote('');
                 }}
-                notes={isLoading || isIdle ? undefined : filteredNotes}
+                notes={isInitialLoading || isIdle ? undefined : filteredNotes}
                 onCheckNote={(n) => mutation.mutate(n.title)}
                 inputValue={note}
                 onInputChange={setNote}

src/pages/_app.tsx

@@ -2,7 +2,7 @@ import type { AppProps } from 'next/app';
 import { StyleSheetManager } from 'styled-components';
 import Head from 'next/head';
 import { Container, DeviceThemeProvider } from '@salutejs/plasma-ui';
-import { QueryClientProvider } from 'react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { spatnavInstance } from '@salutejs/spatial';
 import { useEffect } from 'react';
 

src/state/assistantReactQuery.ts

@@ -1,4 +1,4 @@
-import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from 'react-query';
+import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from '@tanstack/react-query';
 
 import { InputActionType } from '../scenario/types';
 import { OutputActionType } from '../types/todo';
@@ -22,15 +22,19 @@ export function useAssistantMutation<
         return assistantInstance.sendActionPromisified!(action);
     }
 
-    return useMutation(mutationHandler, options);
+    return useMutation({ mutationFn: mutationHandler, ...options });
 }
 
 export function useAssistantQuery<OutputAction extends OutputActionType, InputAction extends InputActionType>(
     action: OutputAction,
     options: Omit<
-        UseQueryOptions<InputAction['payload'], unknown, InputAction['payload'], OutputAction['type']>,
+        UseQueryOptions<InputAction['payload'], unknown, InputAction['payload'], [OutputAction['type']]>,
         'queryKey' | 'queryFn'
-    > = {},
+    >,
 ) {
-    return useQuery(action.type, () => assistantInstance!.sendActionPromisified!(action), options);
+    return useQuery({
+        queryKey: [action.type],
+        queryFn: () => assistantInstance!.sendActionPromisified!(action) ?? null,
+        ...options,
+    });
 }

src/state/state.ts

@@ -1,5 +1,5 @@
 import Router from 'next/router';
-import { QueryClient } from 'react-query';
+import { QueryClient } from '@tanstack/react-query';
 
 import { InputActionType, SetInitialNotesCommand } from '../scenario/types';
 import { GetInitialNotesCommand, Note } from '../types/todo';
@@ -10,7 +10,7 @@ import { useAssistantQuery } from './assistantReactQuery';
 export const queryClient = new QueryClient();
 
 export function addNote(note: string) {
-    queryClient.setQueryData<Note[]>('notes', (oldNotes = []) => [
+    queryClient.setQueryData<Note[]>(['notes'], (oldNotes = []) => [
         ...oldNotes,
         {
             id: Math.random().toString(36).substring(7),
@@ -21,17 +21,17 @@ export function addNote(note: string) {
 }
 
 export function markNoteDone(noteId: string) {
-    queryClient.setQueryData<Note[]>('notes', (oldNotes = []) => {
+    queryClient.setQueryData<Note[]>(['notes'], (oldNotes = []) => {
         return oldNotes.map((todo) => (todo.id === noteId ? { ...todo, completed: true } : todo));
     });
 }
 
 function deleteNote(noteId: string) {
-    queryClient.setQueryData<Note[]>('notes', (oldNotes = []) => oldNotes.filter(({ id }) => id !== noteId));
+    queryClient.setQueryData<Note[]>(['notes'], (oldNotes = []) => oldNotes.filter(({ id }) => id !== noteId));
 }
 
 function setNotes(notes: Note[]) {
-    queryClient.setQueryData<Note[]>('notes', () => notes, { updatedAt: Date.now() + 2000 });
+    queryClient.setQueryData<Note[]>(['notes'], () => notes, { updatedAt: Date.now() + 2000 });
 }
 
 function setInitialNotes(notes: Note[]) {

src/utils/assistant.ts

@@ -98,7 +98,7 @@ export const initAssistant = () => {
 
     assistant.sendActionPromisified = (actionToSend: OutputActionType) => {
         return new Promise<InputActionType['payload']>((resolve, reject) => {
-            const unsubscribe = assistant!.sendAction<InputActionType>(
+            const unsubscribe = assistant!.sendAction<InputActionType, any>(
                 actionToSend,
                 (action) => {
                     resolve(action.payload);

tsconfig.json

@@ -1,19 +1,30 @@
 {
-    "compilerOptions": {
-        "target": "ES2015",
-        "lib": ["dom", "dom.iterable", "esnext"],
-        "allowJs": true,
-        "skipLibCheck": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "noEmit": true,
-        "esModuleInterop": true,
-        "module": "esnext",
-        "moduleResolution": "node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "jsx": "preserve"
-    },
-    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-    "exclude": ["node_modules"]
+  "compilerOptions": {
+    "target": "ES2015",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }