feat(deps): migrate react query v5

cypress/fixtures/files.ts

@@ -3,7 +3,8 @@ import {
   LocalFileItemFactory,
   MaxWidth,
   MimeTypes,
-  S3FileItemFactory,
+  PackedLocalFileItemFactory,
+  PackedS3FileItemFactory,
   buildFileExtra,
   buildS3FileExtra,
 } from '@graasp/sdk';
@@ -18,7 +19,7 @@ export const VIDEO_FILEPATH = 'files/video.mp4';
 export const TEXT_FILEPATH = 'files/sometext.txt';
 
 export const IMAGE_ITEM_DEFAULT: LocalFileItemForTest = {
-  ...LocalFileItemFactory({
+  ...PackedLocalFileItemFactory({
     id: 'bd5519a2-5ba9-4305-b221-185facbe6a99',
     name: 'icon.png',
     description: 'a default image description',
@@ -70,7 +71,7 @@ export const IMAGE_ITEM_DEFAULT_WITH_MAX_WIDTH: LocalFileItemForTest = {
 };
 
 export const VIDEO_ITEM_DEFAULT: LocalFileItemForTest = {
-  ...LocalFileItemFactory({
+  ...PackedLocalFileItemFactory({
     id: 'qd5519a2-5ba9-4305-b221-185facbe6a99',
     name: 'video.mp4',
     description: 'a default video description',
@@ -95,7 +96,7 @@ export const VIDEO_ITEM_DEFAULT: LocalFileItemForTest = {
 };
 
 export const PDF_ITEM_DEFAULT: LocalFileItemForTest = {
-  ...LocalFileItemFactory({
+  ...PackedLocalFileItemFactory({
     id: 'cd5519a2-5ba9-4305-b221-185facbe6a99',
     name: 'doc.pdf',
     description: 'a default pdf description',
@@ -125,7 +126,7 @@ export const ZIP_DEFAULT: ZIPInternalItem = {
 };
 
 export const IMAGE_ITEM_S3: S3FileItemForTest = {
-  ...S3FileItemFactory({
+  ...PackedS3FileItemFactory({
     id: 'ad5519a2-5ba9-4305-b221-185facbe6a99',
     name: 'icon.png',
     description: 'a default image description',
@@ -150,7 +151,7 @@ export const IMAGE_ITEM_S3: S3FileItemForTest = {
 };
 
 export const VIDEO_ITEM_S3: S3FileItemForTest = {
-  ...S3FileItemFactory({
+  ...PackedS3FileItemFactory({
     id: 'qd5519a2-5ba9-4305-b221-185facbe6a93',
     name: 'video.mp4',
     description: 'a default video description',
@@ -175,7 +176,7 @@ export const VIDEO_ITEM_S3: S3FileItemForTest = {
 };
 
 export const PDF_ITEM_S3: S3FileItemForTest = {
-  ...S3FileItemFactory({
+  ...PackedS3FileItemFactory({
     id: 'bd5519a2-5ba9-4305-b221-185facbe6a99',
     name: 'doc.pdf',
     description: 'a default pdf description',

package.json

@@ -20,7 +20,7 @@
     "@emotion/styled": "11.13.0",
     "@graasp/chatbox": "3.3.0",
     "@graasp/map": "1.19.0",
-    "@graasp/query-client": "3.25.0",
+    "@graasp/query-client": "3.26.0",
     "@graasp/sdk": "4.31.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.39.0",

src/components/Root.tsx

@@ -64,7 +64,7 @@ const Root = (): JSX.Element => (
         <ThemeWrapper />
       </I18nextProvider>
       {import.meta.env.DEV && import.meta.env.MODE !== 'test' && (
-        <ReactQueryDevtools position="bottom-right" />
+        <ReactQueryDevtools buttonPosition="bottom-left" />
       )}
     </QueryClientProvider>
   </HelmetProvider>

src/components/file/FileUploader.tsx

@@ -36,7 +36,7 @@ const FileUploader = ({
   const { itemId: parentItemId } = useParams();
   const [error, setError] = useState<string>();
 
-  const { mutateAsync: uploadFiles, isLoading } = mutations.useUploadFiles();
+  const { mutateAsync: uploadFiles, isPending } = mutations.useUploadFiles();
 
   const [totalProgress, setTotalProgress] = useState(0);
 
@@ -96,7 +96,7 @@ const FileUploader = ({
             onDrop([...e.target.files]);
           }
         }}
-        isLoading={isLoading}
+        isLoading={isPending}
         uploadProgress={Math.ceil(totalProgress * 100)}
         multiple
         onDrop={onDrop}

src/components/hooks/useItemCategories.tsx

@@ -36,13 +36,13 @@ export const useItemCategories = ({
 
   const {
     mutate: createItemCategory,
-    isLoading: isPostLoading,
+    isPending: isPostLoading,
     isSuccess: isPostSuccess,
     isError: isPostError,
   } = usePostItemCategory();
   const {
     mutate: deleteItemCategory,
-    isLoading: isDeleteLoading,
+    isPending: isDeleteLoading,
     isSuccess: isDeleteSuccess,
     isError: isDeleteError,
   } = useDeleteItemCategory();

src/components/hooks/useItemLicense.tsx

@@ -54,7 +54,7 @@ const useItemLicense = ({
 
   const {
     mutate: updateItem,
-    isLoading,
+    isPending: isLoading,
     isError,
     isSuccess,
   } = useEditItem({ enableNotifications });

src/components/item/publish/CoEditorsContainer.tsx

@@ -43,7 +43,7 @@ export const CoEditorsContainer = ({
 
   const {
     mutate: updateDisplayCoEditors,
-    isLoading,
+    isPending: isLoading,
     isSuccess,
     isError,
   } = mutations.useEditItem({

src/components/item/publish/EditItemDescription.tsx

@@ -32,7 +32,7 @@ export const EditItemDescription = ({ item }: Props): JSX.Element => {
   const {
     mutate: updateItem,
     isSuccess,
-    isLoading,
+    isPending: isLoading,
     isError,
   } = mutations.useEditItem({
     enableNotifications: false,

src/components/item/publish/EditItemName.tsx

@@ -29,7 +29,7 @@ export const EditItemName = ({ item }: Props): JSX.Element => {
   const {
     mutate: updateItem,
     isSuccess,
-    isLoading,
+    isPending: isLoading,
     isError,
   } = mutations.useEditItem({
     enableNotifications: false,

src/components/item/publish/ItemPublishTab.tsx

@@ -38,10 +38,8 @@ const ItemPublishTab = (): JSX.Element => {
   const { isLoading: isMemberLoading } = hooks.useCurrentMember();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const { status } = useDataSyncContext();
-  const {
-    data: publicationStatus,
-    isInitialLoading: isPublicationStatusLoading,
-  } = usePublicationStatus(item.id);
+  const { data: publicationStatus, isLoading: isPublicationStatusLoading } =
+    usePublicationStatus(item.id);
 
   const [notifyCoEditors, setNotifyCoEditors] = useState<boolean>(false);
 

src/components/item/publish/PublicationStatusComponent.tsx

@@ -29,10 +29,10 @@ const { usePublicationStatus } = hooks;
 export const PublicationStatusComponent = ({ item }: Props): JSX.Element => {
   const { t } = useBuilderTranslation();
   const { t: translateEnum } = useEnumsTranslation();
-  const { data: status, isInitialLoading } = usePublicationStatus(item.id);
+  const { data: status, isLoading } = usePublicationStatus(item.id);
   const translatedType = capitalizeFirstLetter(translateEnum(item.type));
 
-  if (isInitialLoading) {
+  if (isLoading) {
     return (
       <Chip
         icon={<CircularProgress size={15} />}

src/components/item/publish/customizedTags/CustomizedTags.hook.tsx

@@ -32,7 +32,7 @@ export const useCustomizedTags = ({
   const {
     mutate: updateCustomizedTags,
     isSuccess,
-    isLoading,
+    isPending: isLoading,
     isError,
   } = mutations.useEditItem({
     enableNotifications,

src/components/item/publish/publicationButtons/InvalidButton.tsx

@@ -24,7 +24,7 @@ export const InvalidButton = ({ item, isLoading }: Props): JSX.Element => {
   const { id: itemId, public: isPublic } = item;
   const { isOpen, openModal, closeModal } = useModalStatus();
 
-  const { mutate: validateItem, isLoading: isValidating } =
+  const { mutate: validateItem, isPending: isValidating } =
     usePostItemValidation();
 
   const handleValidateItem = () => {

src/components/item/publish/publicationButtons/PublicationButtonSelector.tsx

@@ -23,7 +23,7 @@ export const PublicationButtonSelector = ({
   item,
   notifyCoEditors,
 }: Props): ReactNode | undefined => {
-  const { data: status, isInitialLoading: isStatusFirstLoading } =
+  const { data: status, isLoading: isStatusFirstLoading } =
     usePublicationStatus(item.id);
 
   switch (status) {

src/components/item/publish/publicationButtons/PublishedButton.tsx

@@ -27,7 +27,7 @@ export const PublishedButton = ({ item, isLoading }: Props): JSX.Element => {
   const { t } = useBuilderTranslation();
   const { id: itemId } = item;
 
-  const { mutate: unpublish, isLoading: isUnPublishing } = useUnpublishItem();
+  const { mutate: unpublish, isPending: isUnPublishing } = useUnpublishItem();
 
   const handleUnPublishItem = () => unpublish({ id: itemId });
 

src/components/item/publish/publicationButtons/ReadyToPublishButton.tsx

@@ -29,7 +29,7 @@ export const ReadyToPublishButton = ({
   const { id: itemId, public: isPublic } = item;
   const { isOpen, openModal, closeModal } = useModalStatus();
 
-  const { mutate: publish, isLoading: isPublishing } = usePublishItem();
+  const { mutate: publish, isPending: isPublishing } = usePublishItem();
 
   const publishItem = () =>
     publish({ id: itemId, notification: notifyCoEditors });

src/components/item/publish/publicationButtons/UnpublishedButton.tsx

@@ -23,7 +23,7 @@ export const UnpublishedButton = ({ item, isLoading }: Props): JSX.Element => {
   const { id: itemId, public: isPublic } = item;
   const { isOpen, openModal, closeModal } = useModalStatus();
 
-  const { mutate: validateItem, isLoading: isValidating } =
+  const { mutate: validateItem, isPending: isValidating } =
     usePostItemValidation();
 
   const handleValidateItem = () => {

src/components/item/sharing/shortLink/ShortLinkDialogContent.tsx

@@ -44,9 +44,9 @@ const ShortLinkDialogContent = ({
 }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
 
-  const { mutateAsync: postShortLink, isLoading: loadingPost } =
+  const { mutateAsync: postShortLink, isPending: loadingPost } =
     usePostShortLink();
-  const { mutateAsync: patchShortLink, isLoading: loadingDelete } =
+  const { mutateAsync: patchShortLink, isPending: loadingDelete } =
     usePatchShortLink();
 
   const DIALOG_TITLE = translateBuilder(

src/components/main/DownloadButton.tsx

@@ -20,7 +20,7 @@ export const DownloadButton = ({ item }: Props): JSX.Element => {
     mutate: downloadItem,
     data,
     isSuccess,
-    isLoading: isDownloading,
+    isPending: isDownloading,
   } = mutations.useExportItem();
 
   useEffect(() => {

src/components/main/ImportH5P.tsx

@@ -24,7 +24,8 @@ const ImportH5P = ({
   previousItemId?: DiscriminatedItem['id'];
 }): JSX.Element => {
   const { itemId } = useParams();
-  const { mutateAsync: importH5P, isLoading } = mutations.useImportH5P();
+  const { mutateAsync: importH5P, isPending: isLoading } =
+    mutations.useImportH5P();
   const { update, close: closeNotification } = useUploadWithProgress();
   const { t: translateBuilder } = useBuilderTranslation();
 

src/components/pages/item/accessWrapper/RequestAccessContent.tsx

@@ -27,7 +27,7 @@ const RequestAccessContent = ({ member, itemId }: Props): JSX.Element => {
   const {
     mutateAsync: requestMembership,
     isSuccess,
-    isLoading,
+    isPending: isLoading,
   } = mutations.useRequestMembership();
   const { data: request } = hooks.useOwnMembershipRequest(itemId);