在react-admin中更新突变后的查询,可以通过以下步骤实现:
以下是一个示例突变函数的代码:
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组件来包装编辑按钮,并在点击按钮时调用突变函数。
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中更新突变后的查询时,会触发突变函数发送更新请求到后端,并根据响应刷新查询。
领取专属 10元无门槛券
手把手带您无忧上云