I have an issue I've been struggling with for DAYS with ra-data-hasura and Reac-Admin.
I need to have a resource
name called videos
and images
, BUT the problem is that those two belong to an Endpoint called posts
. My GraphQL data of posts
looks something like this:
Post
- id
- video
- image
- comment
- hashtag
... and so on
So I just can't add my resource names like this:
<Admin
layout={MyLayout}
theme={theme}
dataProvider={dataProvider}
>
<Resource name="images" {...images} icon={ImageIcon} />
<Resource name="videos" {...videos} icon={VideoIcon} />
<Resource name="comments" {...comments} icon={ChatIcon} />
<Resource name="users" {...users} icon={PeopleIcon} />
</Admin>
Because this will result in an error saying that Video and Image do not exist and that I should only use some available endpoints.
So I need to find a way to split images
and videos
from the posts
endpoint.
What I've tried
So, since I am using ra-data-hasura
I need to try something with my DataProvider, which I have something like this:
const apiUrl = process.env.NEXT_PUBLIC_HASURA_GRAPHQL_ENDPOINT
const httpClient = fetchUtils.fetchJson;
function DashboardPage(props) {
const [dataProvider, setDataProvider] = useState(null);
useEffect(() => {
const buildDataProvider = async () => {
const myClientWithAuth = new ApolloClient({
uri: process.env.NEXT_PUBLIC_HASURA_GRAPHQL_ENDPOINT,
cache: new InMemoryCache(),
headers: {
'x-hasura-admin-secret':
process.env.NEXT_PUBLIC_HASURA_GRAPHQL_API_KEY,
},
});
const dataProvider = await buildHasuraProvider(
{client: myClientWithAuth},
{getList: (resource, params) => {
const { page, perPage } = params.pagination;
const { field, order } = params.sort;
const query = {
sort: JSON.stringify([field, order]),
range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
filter: JSON.stringify(params.filter),
};
const endpoint = resource === 'images' || resource === 'videos'
? 'posts'
: resource;
const url = `${apiUrl}/${endpoint}?${stringify(query)}`;
return httpClient(url).then(({ headers, json }) => ({
data: json,
total: parseInt(headers.get('content-range').split('/').pop(), 10),
}));
}}
);
setDataProvider(() => dataProvider);
};
buildDataProvider();
}, []);
if (!dataProvider) return <p>Loading...</p>;
I get nothing, I've tried console logging and nothing. I still get the error that Video or Image is not an available endpoint.
So my question is: Is there a way to solve this? Can I extract my videos
and images
from posts
and create them as a resource? I'll appreciate a ton the help!