优维低代码：Use Provider Hook

优维低代码技术专栏， 是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

• • -

    连载第三十九期

    《高级指引： Use Provider Hook 》

    ▽

    useProvider Hook 可调用 FlowApi 生成的后台 API 接口，需要在 React Functional Components 中使用。

    # 基本用法

    Hook 运行在 onMount / componentDidMount 时。最后一个参数 [] 意味着它将运行 onMount，如果您将变量传递给它[someVariable]，它会在更改值 onMount 时再次运行。

    import React from "react";
    import { useProvider } from "@next-core/brick-kit";

function Todos() {
  // useProvider hook参数，args是provider的参数。
  const options = {
    args: [
      "TEST_CHILD",
      { page: 1, page_size: 10 },
      { interceptorParams: { ignoreLoadingBar: true } },
    ],
  };
  // 最后一个参数`[]`意思是在`onMount`生命周期调用。
  const {
    loading,
    error,
    data = [],
  } = useProvider("easyops.api.cmdb.instance@SearchTotal:1.2.0", options, []);


  return (
    <>
      {error && "Error!"}
      {loading && "Loading..."}
      {data.map((todo) => (
        

{todo.name}

      ))}
    
  );
}

# 手动调用

import React from "react";
import { useProvider } from "@next-core/brick-kit";


function Todos() {
  const options = {
    args: ["TEST_CHILD", { page: 1, page_size: 10 }],
  };


  const request = useProvider("easyops.api.cmdb.instance@SearchTotal:1.2.0");


  const addTodo = () => {
    // 调用API。
    request.query(["TEST_CHILD", { page: 1, page_size: 10 }]);
  };


  return (
    <>
      Add Todo
      {error && "Error!"}
      {request.loading && "Loading..."}
      {request.data.map((todo) => (
        

{todo.name}

      ))}
    
  );
}


// Or


import React from "react";
import { useProvider } from "@next-core/brick-kit";


function Todos() {
  const request = useProvider();


  const addTodo = () => {
    // 调用API。
    request.query("easyops.api.cmdb.instance@SearchTotal:1.2.0", [
      "TEST_CHILD",
      { page: 1, page_size: 10 },
    ]);
  };
  return (
    <>
      Add Todo
      {request.error && "Error!"}
      {request.loading && "Loading..."}
      {request.data.map((todo) => (
        

{todo.name}

      ))}
    
  );
}

# Suspense Mode

import React, { Suspense } from "react";
import { useProvider } from "@next-core/brick-kit";


function Todos() {
  const options = {
    args: ["TEST_CHILD", { page: 1, page_size: 10 }],
    // 使用suspense。
    suspense: true,
  };


  const { data: todos = [] } = useProvider(
    "easyops.api.cmdb.instance@SearchTotal:1.2.0",
    options,
    []
  );


  return (
    <>
      {todos.map((todo) => (
        

{todo.name}

      ))}
    
  );
}


const App = () => (
  
    
  
);

# 分页

import React, { Suspense } from "react";
import { useProvider } from "@next-core/brick-kit";


const Todos = () => {
  const [page, setPage] = useState(1);
  const { data, loading } = useProvider(
    `easyops.api.cmdb.instance@SearchTotal:1.2.0`,
    {
      args: [
        "TEST_CHILD",
        { page: page, page_size: 10 },
        { interceptorParams: { ignoreLoadingBar: true } },
      ],
      transform: (currTodos, newTodos) => [...currTodos, ...newTodos], // 添加新的todos
      data: [],
    },
    [page]
  ); // 当 onMount 和  `page` 更新时触发


  return (
    

      {data.map((todo) => (
        

{todo.title}

      ))}
      {loading && "Loading..."}
      {!loading && (
         setPage(page + 1)}>Load More Todos
      )}
    

  );
};


const App = () => (
  

    
  

);

# 参数解构

// 数组解构
const [request, response, loading, error] = useProvider('easyops.api.cmdb.instance@SearchTotal:1.2.0');


// 对象解构
const {
  request,
  response,
  loading,
  error,
  data,
  query
} = useProvider('easyops.api.cmdb.instance@SearchTotal:1.2.0');


const {
  loading,
  error,
  data,
  query
} = request;


// Provider Options


const {
  // 设置loading为false.
  loading: false,


  // 当发生错误时调用.
  onError: (error) => ({}),


  // 合并list数据或者返回某个字段的数据`newData.someObject`.
  transform: (currData, newData) => ([...currData,...newData]),


  // 开启React Suspense 模式.
  suspense: false,


  // 设置默认data.
  data: [],


  // provider参数.
  args: [],


  // 解构的http参数.
  ...HttpOptions
} = options;