首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

(自动-)在react-admin中更新突变后的查询

在react-admin中更新突变后的查询,可以通过以下步骤实现:

  1. 确定需要更新的查询:首先,确定需要更新的查询,即需要发送到后端的请求。这可以是一个GET请求,用于获取数据,或者是一个POST请求,用于更新数据。
  2. 创建突变函数:在react-admin中,可以使用DataProvider来处理与后端的通信。首先,需要创建一个突变函数,用于发送更新请求。可以使用DataProvider的create方法来创建一个突变函数。
  3. 更新数据:在突变函数中,可以使用axios或其他HTTP库来发送请求到后端。根据需要,可以在请求中包含更新的数据。例如,可以将更新的数据作为请求的payload发送。
  4. 处理响应:一旦收到后端的响应,可以在突变函数中处理响应。根据响应的内容,可以决定是否需要更新本地的数据。
  5. 刷新查询:如果需要更新本地的数据,可以使用DataProvider的refresh方法来刷新查询。这将触发react-admin重新发送查询请求,并更新界面上的数据。

以下是一个示例突变函数的代码:

代码语言:txt
复制
import { fetchUtils } from 'react-admin';

const apiUrl = 'https://api.example.com'; // 后端API的URL

const updateQueryMutation = (resource, params) => {
  const { fetchJson } = fetchUtils;
  const url = `${apiUrl}/${resource}`;

  // 发送更新请求
  return fetchJson(url, {
    method: 'POST',
    body: JSON.stringify(params.data),
  })
    .then((response) => {
      // 处理响应
      if (response.status !== 200) {
        throw new Error(response.statusText);
      }

      // 刷新查询
      return { data: response.json };
    })
    .catch((error) => {
      throw new Error(error.message);
    });
};

export default updateQueryMutation;

在上述代码中,updateQueryMutation函数接收resource和params作为参数。resource表示要更新的资源名称,params包含更新的数据。函数使用fetchJson方法发送POST请求到后端,并处理响应。最后,函数返回一个包含更新后的数据的Promise。

要在react-admin中使用该突变函数,可以在资源的edit或create视图中调用它。例如,在react-admin的List组件中,可以使用Mutation组件来包装编辑按钮,并在点击按钮时调用突变函数。

代码语言:txt
复制
import { Mutation } from 'react-admin';
import updateQueryMutation from './updateQueryMutation';

const MyList = (props) => (
  <List {...props}>
    <Datagrid>
      {/* 列定义 */}
      <Mutation
        type="update"
        resource="query"
        mutation={updateQueryMutation}
      >
        {(mutate) => (
          <EditButton
            label="Edit"
            onClick={(event, record) =>
              mutate({ id: record.id, data: record })
            }
          />
        )}
      </Mutation>
    </Datagrid>
  </List>
);

export default MyList;

在上述代码中,Mutation组件包装了EditButton组件,并传递了突变函数和相关参数。当点击编辑按钮时,突变函数将被调用,并传递记录的id和数据作为参数。

这样,当在react-admin中更新突变后的查询时,会触发突变函数发送更新请求到后端,并根据响应刷新查询。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【译】Graphql, gRPC和端对端类型检验

StackPath最近发布了新的门户网站,它让用户可以一站式地配置我们所提供的服务(CDN,WAF, DNS以及Monitoring)。这个项目涉及到整合不同的数据源,以及一些现有和全新的系统。虽然我们认为开发效率的优先级在一个新启动的项目中是最高的,但我们还是希望在保证足够快的开发进度的前提下,尽可能早地做一些能够保证产品长期稳定运行的技术投资,以便我们能够持续不断地在一个健壮的基础设施上添加新的功能特性。最终我们选择了Apollo GraphQL+gRPC+React+TypeScript这样一套技术栈,并对使用它们的结果感到满意。在这篇博客中,我们会解释为何选择这些技术栈,并通过一个简单的示例项目进行论述。

02
领券