创建一个辅助函数来调用react-querymutation

Question

我正在使用 graphql-codegen 和 React-query 来生成这样的突变。

const [createLogMutation, {}] = useCreateLogMutation({
  variables: {
    data: {
      logType,
      message,
      task
    }
  }
})

我想创建一个辅助函数，使用此函数处理数据库日志记录。但是，我无法在普通函数中使用钩子。实现辅助功能的好方法是什么？

我想要一个像

platformlogger.log(type, message, task)

这样更简单的方法来完成这项工作。如果没有辅助函数，我将不得不在我想要实现记录器的任何地方调用上述突变。

Answer 1

为了在 React.js 中使用带有 GraphQL 的 React-query 突变来简化日志记录过程，您可以创建一个封装突变逻辑的自定义钩子，然后从 heler 函数调用此钩子。我不太了解您正在工作的环境，但这里有一个示例，说明您将如何执行我正在谈论的内容：

import { useCreateLogMutation } from './yourMutationFile'; // Import your mutation hook

const useLogger = () => {
  const [createLogMutation] = useCreateLogMutation();

  const logToDatabase = async (logType, message, task) => {
    try {
      const { data } = await createLogMutation({
        variables: {
          data: {
            logType,
            message,
            task
          }
        }
      });
      // Optionally, you can return the data or handle success in another way
      return data;
    } catch (error) {
      // Handle error (e.g., log it, show a notification)
      console.error('Error logging:', error);
      throw error;
    }
  };

  return logToDatabase;
};

// Helper function for simplified logging
const platformLogger = {
  log: (logType, message, task) => {
    const logToDatabase = useLogger(); // Initialize the logger hook
    logToDatabase(logType, message, task); // Call the logger hook
  }
};

export default platformLogger;

通过此设置，您现在可以在组件中的任何位置使用 platformLogger.log，通过反应查询突变将日志记录到数据库。 确保将“./yourMutationFile”替换为突变挂钩文件的正确路径。

说明：

• useLogger是一个自定义钩子，封装了执行GraphQL突变的逻辑。
• 在 useLogger 内部，使用提供的变量调用 useCreateLogMutation 中的 createLogMutation 钩子。
• logToDatabase函数处理突变逻辑，包括错误处理。
• platformLogger.log 是一个辅助函数，它抽象出突变逻辑并提供更简单的日志记录接口。
• 当调用 platformLogger.log 时，它使用 useLogger 初始化记录器钩子，然后使用提供的参数调用记录器钩子函数。

此方法通过将突变逻辑封装在自定义挂钩中来保持关注点分离，同时提供使用 platformLogger 辅助函数进行日志记录的便捷接口。

---

要为 GraphQL 突变创建突变挂钩文件，通常需要遵循以下步骤：

1. 定义 GraphQL 变异操作。
2. 使用 @apollo/client 或类似库中的 useMutation 钩子来执行突变。
3. 导出突变钩子以在您的组件中使用。

以下是基于您提供的代码的突变挂钩文件的示例：

import { gql } from '@apollo/client';
import { useMutation } from '@apollo/client';

// Define the GraphQL mutation operation
const CREATE_LOG_MUTATION = gql`
  mutation CreateLog($data: LogInput!) {
    createLog(data: $data) {
      id
      logType
      message
      task
      createdAt
    }
  }
`;

// Define the mutation hook
const useCreateLogMutation = () => {
  // Execute the mutation using useMutation hook
  const [createLogMutation] = useMutation(CREATE_LOG_MUTATION);

  return createLogMutation;
};

export default useCreateLogMutation;

说明：

来自 @apollo/client 的
• gql 用于定义 GraphQL 突变操作。在此示例中，我们定义了一个名为 CreateLog 的突变，它接受 LogInput 类型的输入。
• @apollo/client 中的 useMutation 钩子用于执行 CREATE_LOG_MUTATION 定义的突变。
• useCreateLogMutation 函数封装了执行变异的逻辑。
• 然后导出突变挂钩 useCreateLogMutation 以在您的组件中使用。

如果您使用不同的东西，请确保将 @apollo/client 替换为 GraphQL 客户端库。另外，根据您的 GraphQL 架构自定义突变操作 (CREATE_LOG_MUTATION)。