制作自定义反应挂钩以执行查询和突变

Question

这就是我使用 ApolloClient 执行我的 CRUD 操作的方式，我如何使这个过程可重用？我有许多使用相同逻辑的页面，为每个页面编写这些函数非常耗时且相似。每当我尝试在我的功能组件之外使用 useMutation 时，我都会遇到错误，可能是我需要使用自定义挂钩，我该如何实现它

import { useQuery, useMutation, useLazyQuery } from '@apollo/client'

fetch query

  const {
    data: dataQuery,
    loading: loadingQuery,
    error: errorQuery,
  } = useQuery(SEARCH_ALL_ITEMS, {
    variables: { profileId },
  })

add mutation

  const [addRow, { data: dataAdd, loading: loadingAdd, error: errorAdd }] = useMutation(
    CREATE_ITEMS,
    {
      refetchQueries: [{ query: SEARCH_ALL_ITEMS, variables: { profileId } }],
      onCompleted: () => {
        notification.success({
          message: 'Success',
          description: 'Information is added',
        })
      },
    },
  )



 useEffect(() => {
      if (loadingQuery || loadingAdd || loadingDelete || loadingUpdate || loadingLazyQuery) {
        setLoading(true)
      } else {
        setLoading(false)
      },[loadingQuery, loadingAdd, loadingDelete, loadingUpdate]}

Answer 1

我会选择这样的东西

import { useQuery, useMutation, useLazyQuery } from '@apollo/client'

export const useQueryMutation = ({query, variables: queryVariables}, 
  {mutations: { add, update, delete }}) => {
  const {
    data: dataQuery,
    loading: loadingQuery,
    error: errorQuery,
  } = useQuery(query, {
    variables: queryVariables,
  })

  const [addRow, { data: dataAdd, loading: loadingAdd, error: errorAdd }] = useMutation(
    add,
    {
      variables: mutationVariables,
      refetchQueries: [{ query, variables: queryVariables }],
      onCompleted: () => {
        notification.success({
          message: 'Success',
          description: 'Information is added',
        })
      },
    },
  );

  const [updateRow, { data: dataUpdate, loading: loadingUpdate, error: errorUpdate }] = useMutation(
    update,
    {
      refetchQueries: [{ query, variables: queryVariables }],
      onCompleted: () => {
        notification.success({
          message: 'Success',
          description: 'Information is updated ',
        })
      },
    },
  );

const [deleteRow, { data: dataDelete, loading: loadingDelete, error: errorDelete }] = useMutation(
    delete,
    {
      refetchQueries: [{ query, variables: queryVariables }],
      onCompleted: () => {
        notification.success({
          message: 'Success',
          description: 'Information is deleted ',
        })
      },
    },
  );

  return {
    query: {
      data: dataQuery,
      loading: loadingQuery,
      error: errorQuery
    },
    mutation: {
      add: {
        mutate: addRow,
        data: dataAdd,
        loading: loadingAdd,
        error: errorAdd
      }, 
      update: {
        mutate: updateRow,
        data: dataUpdate,
        loading: loadingUpdate,
        error: errorUpdate
      }, 
      delete: {
        mutate: deleteRow,
        data: dataDelete,
        loading: loadingDelete,
        error: errorDelete
      }, 
    },
   loading: loadingQuery || loadingAdd || loadingDelete || loadingUpdate || loadingLazyQuery
  }
}

并像

一样使用它

const {query: {data}, mutation: {add, update, delete}, loading} = useQueryMutation({query: SEARCH_ALL_ITEMS, variables: { profileId }, { mutation:{add: CREATE_ITEMS, update: UPDATE_ITEMS, delete: DELETE_ITEMS} });

Answer 2

一个可靠的选择是 apollo 的 GraphQL 代码生成器： https://www.graphql-code-generator.com/docs/plugins/typescript-react-apollo

此插件可让您在存储库中创建一个新文件，例如：searchAllItems.graphql

并在其中粘贴 graphql 查询/突变（gql`` 模板函数中的内容。

当您运行生成器时，它会为您创建挂钩。

如果您的查询名为“query SearchAllItems { ... }”

然后您将有一个名为“useSearchAllItemsQuery”的钩子已经为您设置好。

制作自定义反应挂钩以执行查询和突变

Making a custom react hook to perform queries and mutations

reactjs

react-hooks

apollo-client