chore: rename useGraphQL to useGraphQLClient

front/src/components/ArticleContributors.jsx

@@ -1,48 +1,32 @@
 import React, { useCallback } from 'react'
+import { useArticleContributorActions } from '../hooks/contributor.js'
 import { useMutate, useMutation } from '../hooks/graphql.js'
 
 import styles from './articleContributors.module.scss'
 import ContactSearch from './ContactSearch.jsx'
-import {
-  addContributor,
-  removeContributor,
-} from './ArticleContributors.graphql'
+
 import { getArticleContributors } from './Article.graphql'
 import { useToasts } from '@geist-ui/core'
 
 export default function ArticleContributors({ article, contributors }) {
-  const mutation = useMutation()
   const { setToast } = useToasts()
   const articleId = article._id
-  const { mutate } = useMutate({
-    query: getArticleContributors,
-    variables: { articleId },
+  const { addContributor, removeContributor } = useArticleContributorActions({
+    articleId,
   })
-
   const handleUserUpdated = useCallback(
     async ({ user, action }) => {
       const { _id: userId } = user
       if (action === 'select') {
         // add contributor
         try {
-          const response = await mutation({
-            query: addContributor,
-            variables: { userId, articleId },
-          })
+          await addContributor(userId)
           setToast({
             text: `Contributeur ${
               user.displayName || user.username
             } ajouté à l'article.`,
             type: 'default',
           })
-          await mutate(
-            {
-              article: {
-                contributors: response.article.addContributor.contributors,
-              },
-            },
-            { revalidate: false }
-          )
         } catch (err) {
           setToast({
             text: String(err),
@@ -51,24 +35,13 @@ export default function ArticleContributors({ article, contributors }) {
         }
       } else if (action === 'unselect') {
         try {
-          const response = await mutation({
-            query: removeContributor,
-            variables: { userId, articleId },
-          })
+          await removeContributor(userId)
           setToast({
             text: `Contributeur ${
               user.displayName || user.username
             } supprimé de l'article.`,
             type: 'warning',
           })
-          await mutate(
-            {
-              article: {
-                contributors: response.article.removeContributor.contributors,
-              },
-            },
-            { revalidate: false }
-          )
         } catch (err) {
           setToast({
             text: String(err),

front/src/components/ArticleCreate.jsx

@@ -3,7 +3,7 @@ import React, { useState, useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
-import { useGraphQL } from '../helpers/graphQL'
+import { useGraphQLClient } from '../helpers/graphQL'
 import { createArticle } from './Articles.graphql'
 import Field from './Field.jsx'
 import { getTags } from './Tag.graphql'
@@ -30,7 +30,7 @@ export default function ArticleCreate({ onSubmit, workspaceId = null }) {
   const { setToast } = useToasts()
 
   const [tags, setTags] = useState([])
-  const runQuery = useGraphQL()
+  const { query } = useGraphQLClient()
   const workspaces = useSelector((state) => state.activeUser.workspaces)
 
   useEffect(() => {
@@ -39,7 +39,7 @@ export default function ArticleCreate({ onSubmit, workspaceId = null }) {
       try {
         const {
           user: { tags },
-        } = await runQuery({ query: getTags, variables: {} })
+        } = await query({ query: getTags, variables: {} })
         setTags(tags)
       } catch (err) {
         setToast({
@@ -54,7 +54,7 @@ export default function ArticleCreate({ onSubmit, workspaceId = null }) {
     try {
       event.preventDefault()
       const createArticleInput = fromFormData(event.target)
-      const { createArticle: createdArticle } = await runQuery({
+      const { createArticle: createdArticle } = await query({
         query: createArticle,
         variables: { createArticleInput },
       })

front/src/components/Chapter.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Check, Edit3 } from 'react-feather'
 
-import { useGraphQL } from '../helpers/graphQL'
+import { useGraphQLClient } from '../helpers/graphQL'
 import { renameArticle as query } from './Article.graphql'
 import Button from './Button'
 import buttonStyles from './button.module.scss'
@@ -25,7 +25,7 @@ export default function Chapter({ article }) {
   const [title, setTitle] = useState(article.title)
   const [tempTitle, setTempTitle] = useState(article.title)
   const activeUser = useCurrentUser()
-  const runQuery = useGraphQL()
+  const { query } = useGraphQLClient()
 
   const rename = async (e) => {
     e.preventDefault()
@@ -34,7 +34,7 @@ export default function Chapter({ article }) {
       article: articleId,
       title: tempTitle,
     }
-    await runQuery({ query, variables })
+    await query({ query, variables })
     setTitle(tempTitle)
     setRenaming(false)
   }

front/src/components/Corpus.jsx

@@ -15,7 +15,7 @@ import Export from './Export.jsx'
 import Chapter from './Chapter.jsx'
 
 import etv from '../helpers/eventTargetValue.js'
-import { useGraphQL } from '../helpers/graphQL.js'
+import { useGraphQLClient } from '../helpers/graphQL.js'
 import { updateTag as query } from './Corpus.graphql'
 
 import styles from './articles.module.scss'
@@ -38,7 +38,7 @@ export default function Book({ name: tagName, _id, updatedAt, articles }) {
   const [isRenaming, setIsRenaming] = useState(false)
   const { t } = useTranslation()
 
-  const runQuery = useGraphQL()
+  const { query } = useGraphQLClient()
 
   const renameBook = useCallback(
     async (event) => {
@@ -48,7 +48,7 @@ export default function Book({ name: tagName, _id, updatedAt, articles }) {
         tag: _id,
         name: tempName,
       }
-      const newTag = await runQuery({ query, variables })
+      const newTag = await query({ query, variables })
       setName(newTag.updateTag.name)
       setIsRenaming(false)
     },

front/src/components/Credentials.jsx

@@ -2,8 +2,8 @@ import React, { useMemo, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
-import { useGraphQL } from '../helpers/graphQL'
-import { changePassword as query } from './Credentials.graphql'
+import { useGraphQLClient } from '../helpers/graphQL'
+import { changePassword as changePasswordQuery } from './Credentials.graphql'
 import styles from './credentials.module.scss'
 import fieldStyles from './field.module.scss'
 import Button from './Button'
@@ -19,7 +19,7 @@ export default function Credentials() {
   const hasExistingPassword = useSelector((state) =>
     state.activeUser.authTypes.includes('local')
   )
-  const runQuery = useGraphQL()
+  const { query } = useGraphQLClient()
   const { t } = useTranslation()
 
   const canSubmit = useMemo(() => {
@@ -39,7 +39,7 @@ export default function Credentials() {
         new: password,
         user: userId,
       }
-      await runQuery({ query, variables })
+      await query({ query: changePasswordQuery, variables })
       setPassword('')
       setPasswordO('')
       setPasswordC('')

front/src/components/Register.jsx

@@ -2,7 +2,7 @@ import React, { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useHistory } from 'react-router-dom'
 import { useToasts } from '@geist-ui/core'
-import { useGraphQL } from '../helpers/graphQL'
+import { useGraphQLClient } from '../helpers/graphQL'
 import * as queries from './Credentials.graphql'
 
 import styles from './login.module.scss'
@@ -18,14 +18,14 @@ export default function Register() {
   const passwordRef = useRef()
   const passwordConfirmationRef = useRef()
   const history = useHistory()
-  const runQuery = useGraphQL()
+  const { query } = useGraphQLClient()
 
   const handleFormSubmit = useCallback(async (event) => {
     event.preventDefault()
     const details = fromFormData(event.target)
 
     try {
-      await runQuery({ query: queries.createUser, variables: { details } })
+      await query({ query: queries.createUser, variables: { details } })
       // if no error thrown, we can navigate to /
       setToast({
         type: 'default',

front/src/components/TagCreate.jsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { randomColor } from '../helpers/colors.js'
-import { useGraphQL } from '../helpers/graphQL'
+import { useGraphQLClient } from '../helpers/graphQL'
 import { useMutate } from '../hooks/graphql'
 import { createTag, getTags } from './Tag.graphql'
 
@@ -20,7 +20,7 @@ export default function TagCreate() {
   const { state: color, bindings: colorBindings } = useInput(randomColor())
 
   const activeUser = useCurrentUser()
-  const runQuery = useGraphQL()
+  const { query } = useGraphQLClient()
 
   const variables = {
     user: activeUser._id,
@@ -34,7 +34,7 @@ export default function TagCreate() {
       event.preventDefault()
       ;(async () => {
         try {
-          const result = await runQuery({
+          const result = await query({
             query: createTag,
             variables,
           })

front/src/components/UserInfos.jsx

@@ -5,7 +5,7 @@ import { useSelector, useDispatch, shallowEqual } from 'react-redux'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { Helmet } from 'react-helmet'
 
-import { useGraphQL } from '../helpers/graphQL'
+import { useGraphQLClient } from '../helpers/graphQL'
 import { updateUser } from './Credentials.graphql'
 import etv from '../helpers/eventTargetValue'
 import styles from './credentials.module.scss'
@@ -17,7 +17,7 @@ import TimeAgo from './TimeAgo.jsx'
 export default function UserInfos() {
   const dispatch = useDispatch()
   const { t } = useTranslation()
-  const runQuery = useGraphQL()
+  const { query } = useGraphQLClient()
   const activeUser = useSelector((state) => state.activeUser, shallowEqual)
   const zoteroToken = useSelector((state) => state.activeUser.zoteroToken)
   const sessionToken = useSelector((state) => state.sessionToken)
@@ -44,7 +44,7 @@ export default function UserInfos() {
     event.preventDefault()
 
     const variables = { user: activeUser._id, details: { zoteroToken: null } }
-    await runQuery({ query: updateUser, variables })
+    await query({ query: updateUser, variables })
     clearZoteroToken()
     setIsSaving(false)
   }, [])
@@ -57,7 +57,7 @@ export default function UserInfos() {
         user: activeUser._id,
         details: { displayName, firstName, lastName, institution },
       }
-      const { updateUser: userDetails } = await runQuery({
+      const { updateUser: userDetails } = await query({
         query: updateUser,
         variables,
       })

front/src/components/Write/Versions.jsx

@@ -17,7 +17,7 @@ import styles from './versions.module.scss'
 import menuStyles from './menu.module.scss'
 import buttonStyles from '../button.module.scss'
 
-import { useGraphQL } from '../../helpers/graphQL'
+import { useGraphQLClient } from '../../helpers/graphQL'
 import { renameVersion } from './Write.graphql'
 
 import Modal from '../Modal'
@@ -62,7 +62,7 @@ function Version({ articleId, compareTo, readOnly, selectedVersion, v }) {
     [styles.compareTo]: isComparing && articleVersionId === compareTo,
   })
 
-  const runQuery = useGraphQL()
+  const { query } = useGraphQLClient()
   const [renaming, setRenaming] = useState(false)
   const [title, setTitle] = useState(v.message)
   const versionType = v.type || 'userAction'
@@ -80,7 +80,7 @@ function Version({ articleId, compareTo, readOnly, selectedVersion, v }) {
     async (event) => {
       event.preventDefault()
       const variables = { version: articleVersionId, name: title }
-      await runQuery({ query: renameVersion, variables })
+      await query({ query: renameVersion, variables })
       setTitle(title)
       setRenaming(false)
     },

front/src/components/Write/Write.jsx

@@ -21,7 +21,7 @@ import ErrorMessageCard from '../ErrorMessageCard.jsx'
 import styles from './write.module.scss'
 
 import { useActiveUserId } from '../../hooks/user'
-import { useGraphQL } from '../../helpers/graphQL'
+import { useGraphQLClient } from '../../helpers/graphQL'
 import { getEditableArticle as query, stopSoloSession } from './Write.graphql'
 
 import ArticleEditorMenu from './ArticleEditorMenu.jsx'
@@ -59,7 +59,7 @@ export default function Write() {
   )
   const userId = useActiveUserId()
   const dispatch = useDispatch()
-  const runQuery = useGraphQL()
+  const { query } = useGraphQLClient()
   const routeMatch = useRouteMatch()
   const [collaborativeSessionActive, setCollaborativeSessionActive] =
     useState(false)
@@ -226,7 +226,7 @@ export default function Write() {
 
     setIsLoading(true)
     ;(async () => {
-      const data = await runQuery({ query, variables }).catch((error) => {
+      const data = await query({ query, variables }).catch((error) => {
         setGraphQLError(error)
         return {}
       })

front/src/components/Write/bibliographe/ZoteroPanel.jsx

@@ -6,7 +6,7 @@ import {
   fetchAllCollectionsPerLibrary,
   fetchBibliographyFromCollectionHref,
 } from '../../../helpers/zotero'
-import { useGraphQL } from '../../../helpers/graphQL'
+import { useGraphQLClient } from '../../../helpers/graphQL'
 import { useProfile } from '../../../helpers/userProfile'
 import { applicationConfig } from '../../../config.js'
 import { linkToZotero as query } from '../../Article.graphql'
@@ -40,7 +40,7 @@ export default function ZoteroPanel({
   const [zoteroCollections, setZoteroCollections] = useState([])
 
   const [isSaving, setSaving] = useState(false)
-  const runQuery = useGraphQL()
+  const { query } = useGraphQLClient()
   const refreshProfile = useProfile()
 
   const handleZoteroLinkChange = useCallback(
@@ -79,7 +79,7 @@ export default function ZoteroPanel({
           user: userId,
           article: articleId,
         }
-        await runQuery({ query, variables })
+        await query({ query, variables })
       } catch (err) {
         alert(err)
       }

front/src/components/Write/providers/monaco/DiffEditor.jsx

@@ -4,7 +4,7 @@ import CompareSelect from './CompareSelect'
 import styles from './DiffEditor.module.scss'
 import * as monaco from 'monaco-editor'
 import { DiffEditor, loader } from '@monaco-editor/react'
-import { useGraphQL } from '../../../../helpers/graphQL'
+import { useGraphQLClient } from '../../../../helpers/graphQL'
 import { compareVersion as query } from '../../Write.graphql'
 import { defineFlippedDiffTheme } from './support'
 loader.config({ monaco })
@@ -19,7 +19,7 @@ export default function MonacoDiffEditor({
   onTextUpdate,
 }) {
   const [modifiedText, setModifiedText] = useState('')
-  const runQuery = useGraphQL()
+  const { query } = useGraphQLClient()
 
   const handleEditorDidMount = useCallback((editor, monaco) => {
     defineFlippedDiffTheme(monaco)
@@ -38,7 +38,7 @@ export default function MonacoDiffEditor({
   }, [])
 
   useEffect(() => {
-    runQuery({
+    query({
       query,
       variables: {
         article: articleId,