api-platform / admin

A beautiful and fully-featured administration interface builder for hypermedia APIs
https://api-platform.com/docs/admin/
MIT License
481 stars 130 forks source link

DeleteButton doesn't work #578

Open wiktorpikosz opened 1 month ago

wiktorpikosz commented 1 month ago

API Platform version(s) affected: x.y.z Backend: v3.2.13 Admin: 3.4.9

Description
doesn't work for the list of items. I can click on them and send the get collection or the get request, but don't send a delete request. The element is removed from the list but after a few seconds the list is refreshed and is again on the list.

How to reproduce
I created a list in this way:

const UserList = () => {
  return (
    <ListGuesser>
      <TextField source="originId" label="ID" sortBy="id" />
      <FieldGuesser source="email" />
      <FieldGuesser source="createdAt" />
      <FieldGuesser source="confirmed" sortable={false} />
      <FieldGuesser source="roles" sortable={false} />
      <LoginAsUserButton />
      <DeleteButton />
      <EditButton />
    </ListGuesser>
  );

I can click on the button, but the DELETE request isn't sent.

Possible Solution
I can guess that the dataProvider has some issues. Or this button as a component from react-admin isn't supported.

Additional Context
I used custom authorization and data provider.

const getHeaders = (): HeadersInit => {
  const userToken = token();
  return {
    Authorization: `Bearer ${userToken}`,
  };
};

const httpClient = (url: URL, options: any = {}) => {
  return baseFetchHydra(url, {
    headers: getHeaders,
  });
};

const apiDocumentationParser = async (entrypointUrl: string) => {
  try {
    return await parseHydraDocumentation(entrypointUrl, {
      headers: getHeaders,
    });
  } catch (result: any) {
    const { api, response, status } = result;

    if (status !== 401 || !response) {
      throw result;
    }

    localStorage.removeItem("auth");

    return {
      api,
      response,
      status,
    };
  }
};

const dataProvider = hydraDataProvider({
  entrypoint: entrypoint,
  httpClient: httpClient,
  apiDocumentationParser: apiDocumentationParser,
});
const schemaAnalyzer = hydraSchemaAnalyzer();

function App() {
  return (
    <HydraAdmin
      entrypoint={entrypoint}
      authProvider={authProvider}
      dataProvider={dataProvider}
      schemaAnalyzer={schemaAnalyzer}
      requireAuth
    >
      <ResourceGuesser name="users" list={UserList} />
    </HydraAdmin>
  );
}
wiktorpikosz commented 1 month ago

My mistake in the client:

const httpClient = (url: URL, options: any = {}) => {
  return baseFetchHydra(url, {
    ...options,
    headers: getHeaders,
  });
};

This was the reason why the DELETE request was sent as GET because the information with the method from the options parameter was removed.