2

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!

theKid
  • 522
  • 6
  • 19

0 Answers0