Discussion & query

lambda2 · May 28, 2020 · 7085d3f · 7085d3f
1 parent f55b07c
commit 7085d3f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 116 deletions.
diff --git a/frontend/components/Discussion/Discussion.tsx b/frontend/components/Discussion/Discussion.tsx
@@ -5,7 +5,7 @@ import UserContext from 'contexts/UserContext';
 import DiscussionInput from 'elements/DiscussionInput/DiscussionInput';
 import { create, update, destroy } from 'api/message';
 import { destroy as destroyDiscussion } from 'api/discussion';
-import { useMutation } from 'react-query';
+import { useMutation, queryCache } from 'react-query';
 import MessageList from '../MessageList/MessageList';
 import Paginated from '../Paginated/Paginated';
 import usePaginatedCollection from 'hooks/usePaginatedCollection';
@@ -85,20 +85,32 @@ const Discussion = ({
   }
 
   const [onCreate] = useMutation(createMessage, {
-    onSuccess: (data) => {
-      console.log("[Message Creation MUTATE] ! onSuccess => ", data);
+    // Optimistically update the cache value on mutate, but store
+    // the old value and return it so that it's accessible in case of
+    // an error
+    onMutate: newMessage => {
+      queryCache.cancelQueries(messagesEndpoint || '')
+
+      const previousValue = queryCache.getQueryData(messagesEndpoint || '')
+
+      console.log("Updating qdata: ", messagesEndpoint || '', { previousValue });
 
-      messagesResponse.refetch()
-    },
-    onMutate: (data) => {
-      console.log("[Message Creation MUTATE] ! onMutate => ", data);
+      queryCache.setQueryData(messagesEndpoint || '', (old?: Message[]) => ({
+        ...(old || []),
+        newMessage,
+      }))
+
+      return previousValue
     },
-    onError: (data) => {
-      console.log("[Message Creation MUTATE] ! onError => ", data);
+    // On failure, roll back to the previous messages list
+    onError: (err, variables, previousValue) =>
+      queryCache.setQueryData(messagesEndpoint || '', previousValue),
+    onSuccess: () => {
+      console.log("Message created");
+
     },
-    onSettled: (data) => {
-      console.log("[Message Creation MUTATE] ! onSettled => ", data);
-    }
+    // After success or failure, refetch the messages
+    onSettled: () => queryCache.refetchQueries(messagesEndpoint || ''),
   })
 
   const [onEdit] = useMutation(editMessage, {

diff --git a/frontend/package.json b/frontend/package.json
@@ -41,7 +41,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-mde": "^9.1.1",
-    "react-query": "^1.2.0",
+    "react-query": "^1.5.3",
     "react-select": ">= 3.1.0",
     "react-showdown": "^2.0.3",
     "showdown": "^1.9.1",

diff --git a/frontend/utils/http.ts b/frontend/utils/http.ts
@@ -123,104 +123,6 @@ export function useCollection<T>(
   )
 }
 
-// /**
-//  * A hook allowing us to handle a remote collection properly
-//  *
-//  * @export
-//  * @template T the response type
-//  * @param {string} endpoint the url we want to fetch (without the domain)
-//  * @param {string} [token] the user auth token if we have one
-//  * @param {AxiosRequestConfig} [requestOpts]
-//  * @param {QueryOptions<T>} [hookOpts]
-//  * @returns {PaginatedQueryResult<T>}
-//  */
-// export function usePaginatedCollection<T>(
-//   endpointKey: string | any[] | undefined | boolean | number,
-//   startpage?: number | string | string[],
-//   token?: string,
-//   requestOpts?: AxiosRequestConfig,
-//   hookOpts?: QueryOptions<AxiosResponse<T>>
-// ): PaginatedQueryResult<AxiosResponse<T>> {
-
-//   const { language } = useLocale()
-//   const authHeaders = getHeaders(token || '');
-//   const headers = {
-//     'Accept-Language': language,
-//     ...authHeaders
-//   }
-
-//   const page = startpage || 1
-
-//   const endpoint = isArray(endpointKey) ? first(endpointKey) : endpointKey
-//   const fullKey = isArray(endpointKey) ? [...endpointKey, token, page] : [endpointKey, token, page]
-
-//   const getCollection = (opts: any, page: any): Promise<AxiosResponse<T>> => {
-//     console.log({ opts, page });
-
-//     return api<T>(endpoint, { headers, ...requestOpts, ...opts })
-//   }
-
-//   // console.log("Using usePaginatedCollection with ", { fullKey, getCollection, hookOpts });
-
-//   return usePaginatedQuery<AxiosResponse<T>, AnyQueryKey>(
-//     fullKey as any,
-//     getCollection,
-//     hookOpts
-//   )
-// }
-
-// /**
-//  * A hook allowing us to handle a remote collection properly
-//  *
-//  * @export
-//  * @template T the response type
-//  * @param {string} endpoint the url we want to fetch (without the domain)
-//  * @param {string} [token] the user auth token if we have one
-//  * @param {AxiosRequestConfig} [requestOpts]
-//  * @param {QueryOptions<T>} [hookOpts]
-//  * @returns {PaginatedQueryResult<T>}
-//  */
-// export function useInfiniteCollection<T>(
-//   endpointKey: string | any[] | undefined | boolean | number,
-//   startpage?: number | string | string[],
-//   token?: string,
-//   requestOpts?: AxiosRequestConfig,
-//   hookOpts?: any
-// ): InfiniteQueryResult<AxiosResponse<T[]>, unknown> {
-
-//   const { language } = useLocale()
-//   const authHeaders = getHeaders(token || '');
-//   const headers = {
-//     'Accept-Language': language,
-//     ...authHeaders
-//   }
-
-//   const endpoint = isArray(endpointKey) ? first(endpointKey) : endpointKey
-
-//   const getCollection = (opts: any, page: any, a: any, b: any, c: any): Promise<AxiosResponse<T[]>> => {
-//     console.log({ opts, page, a, b, c });
-
-//     return api<T[]>(`${endpoint}?page=${page}`, { headers, ...requestOpts, ...opts })
-//   }
-
-//   // console.log("Using usePaginatedCollection with ", { fullKey, getCollection, hookOpts });
-
-//   const getFetchMore = (lastPage: AxiosResponse<T[]>, allPages: AxiosResponse<T[]>[]) => {
-//     const parsed = plh(lastPage.headers.link)
-
-//     // console.log("getFetchMore => ", { lastPage, allPages, parsed, h: lastPage.headers});
-//     // console.log("Nextpage -> ", parsed?.next?.page);
-
-//     return parsed?.next && parsed?.next?.page
-//   }
-
-//   return useInfiniteQuery<AxiosResponse<T[]>, AnyQueryKey, unknown>(
-//     endpoint as any,
-//     getCollection as any,
-//     { getFetchMore }
-//   )
-// }
-
 /**
  * A simple fetch on our API, returning the data directly, not the whole response
  *

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -9458,10 +9458,10 @@ react-mde@^9.1.1:
   resolved "https://registry.yarnpkg.com/react-mde/-/react-mde-9.1.2.tgz#91aeb1a2e7d7af30525bd5c78c5fb0afc874f4df"
   integrity sha512-QbeMWO81Jai0qUukBDp+IfIusx4ltUiT5RAjDFyxiDmzPZe3KVjAdX4t/MUVO+YiVPObSGczo4HZ3Tz5/lQZZw==
 
-react-query@^1.2.0:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-1.4.4.tgz#81822983131f79f3e09b44669d78c8ec1e409347"
-  integrity sha512-WDjQp3ujw9KcbrwwDausMrjLMOv6j19qxfhnUXSf+N73ku28uwrKFPBGbKbmj3n/ybnSN//7KLey6LT76KtFxQ==
+react-query@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-1.5.3.tgz#672dbda734113e8b0e0b90b06e003c4daeef8a58"
+  integrity sha512-KiOdVnKdimn8QCNirs1lJdrCE5o8nFgn8BMmlk2ujfUopnHPSGZs4EaVSuwRynNaTNI0N9U0Fws1Pcn6DtvE2g==
   dependencies:
     "@scarf/scarf" "^1.0.0"
     ts-toolbelt "^6.4.2"
@@ -11033,11 +11033,16 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-ts-toolbelt@*, ts-toolbelt@^6.4.2:
+ts-toolbelt@*:
   version "6.7.7"
   resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-6.7.7.tgz#4d7f34cafd519bf0f1d6da5a4b07889db6ba0184"
   integrity sha512-GrgXML3KOnYymiyFNEohhizPtO+ZgTwEN9oIR+SvP6EPP5cj4qH1Xi5CU4iobgMUNYMEVhXqnBLY1tSonXwE+g==
 
+ts-toolbelt@^6.4.2:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-6.9.4.tgz#cc3a070d99c557c552b4f69e36f13d430c47a760"
+  integrity sha512-muRZZqfOTOVvLk5cdnp7YWm6xX+kD/WL2cS/L4zximBRcbQSuMoTbQQ2ZZBVMs1gB0EZw1qThP+HrIQB35OmEw==
+
 tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"