configure hasura dataProvider

would anyone want to help me configure a 'Hasura' data provider? I've completed the 'Material UI' tutorial, and have a Hasura instance running. I've configured and imported an instance of the hasura dataProvider into the App, and created a list page for one of the resources associated with this hasura instance
11 Replies
Omer
Omer2y ago
Hey @UsererOfName 👋, Can you check the permissions of your hasura api? Is there an error you get?
extended-salmon
extended-salmon2y ago
thanks for your response! i just inspected the network tab of the browser, and it looks like there was no request sent out to the hasura instance,
No description
Omer
Omer2y ago
Hmm could you share list page?
extended-salmon
extended-salmon2y ago
import React from "react";
// import { useMany } from "@pankod/refine-core";
import {
useDataGrid,
DataGrid,
GridColumns,
ShowButton,
// TagField,
DateField,
EditButton,
Stack,
List,
} from "@pankod/refine-mui";

import { IFilterz } from "interfaces";

const columns: GridColumns = [
{ field: "filterz", headerName: "Filterz", flex: 1, minWidth: 350 },
{ field: "pro_rep_team", headerName: "Pro Rep Team", flex: 1, minWidth: 350 },
{ field: "product", headerName: "Product", flex: 1, minWidth: 350 },
{ field: "insurance", headerName: "Insurance", flex: 1, minWidth: 350 },
{ field: "type", headerName: "Type", flex: 1, minWidth: 350 },
{ field: "status", headerName: "Status", flex: 1, minWidth: 350 },
{
field: "date_rx_received",
headerName: "Date Rx RC'd",
minWidth: 220,
renderCell: function render(params) {
return (
<DateField format="LLL" value={params.row.date_rx_received} />
);
},
},
{
headerName: "Actions",
field: "actions",
minWidth: 250,
renderCell: function render(params) {
return (
<Stack direction="row" spacing={1}>
<EditButton hideText recordItemId={params.row.id} />
<ShowButton hideText recordItemId={params.row.id} />
</Stack>
);
},
},
];

export const FilterzList: React.FC = () => {
const { dataGridProps } = useDataGrid<IFilterz>({
dataProviderName: 'hasura'
});

return (
<List>
<DataGrid {...dataGridProps} columns={columns} autoHeight />
</List>
);
};
import React from "react";
// import { useMany } from "@pankod/refine-core";
import {
useDataGrid,
DataGrid,
GridColumns,
ShowButton,
// TagField,
DateField,
EditButton,
Stack,
List,
} from "@pankod/refine-mui";

import { IFilterz } from "interfaces";

const columns: GridColumns = [
{ field: "filterz", headerName: "Filterz", flex: 1, minWidth: 350 },
{ field: "pro_rep_team", headerName: "Pro Rep Team", flex: 1, minWidth: 350 },
{ field: "product", headerName: "Product", flex: 1, minWidth: 350 },
{ field: "insurance", headerName: "Insurance", flex: 1, minWidth: 350 },
{ field: "type", headerName: "Type", flex: 1, minWidth: 350 },
{ field: "status", headerName: "Status", flex: 1, minWidth: 350 },
{
field: "date_rx_received",
headerName: "Date Rx RC'd",
minWidth: 220,
renderCell: function render(params) {
return (
<DateField format="LLL" value={params.row.date_rx_received} />
);
},
},
{
headerName: "Actions",
field: "actions",
minWidth: 250,
renderCell: function render(params) {
return (
<Stack direction="row" spacing={1}>
<EditButton hideText recordItemId={params.row.id} />
<ShowButton hideText recordItemId={params.row.id} />
</Stack>
);
},
},
];

export const FilterzList: React.FC = () => {
const { dataGridProps } = useDataGrid<IFilterz>({
dataProviderName: 'hasura'
});

return (
<List>
<DataGrid {...dataGridProps} columns={columns} autoHeight />
</List>
);
};
` i'll share the configured data provider and app also configured provider,
import { GraphQLClient } from "graphql-request";

const API_URL = 'someURL';

const client = new GraphQLClient(API_URL);

// client.setHeader(
// "Authorization",
// "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjQ2MzkzNDY2LCJleHAiOjE2NDg5ODU0NjZ9.5TjmTOLL7x7kcNKpq9MFwI_w1fReF4f-wlir2rocvi8",
// );

client.setHeaders({
"Hasura-Client-Name": "hasura-console",
"x-hasura-admin-secret": "someChangedPassword"
})

export default client;
import { GraphQLClient } from "graphql-request";

const API_URL = 'someURL';

const client = new GraphQLClient(API_URL);

// client.setHeader(
// "Authorization",
// "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjQ2MzkzNDY2LCJleHAiOjE2NDg5ODU0NjZ9.5TjmTOLL7x7kcNKpq9MFwI_w1fReF4f-wlir2rocvi8",
// );

client.setHeaders({
"Hasura-Client-Name": "hasura-console",
"x-hasura-admin-secret": "someChangedPassword"
})

export default client;
Omer
Omer2y ago
It seems you forgot to send metaData to useDataGrid. You can get help from our hasura example Also you can check our GraphQL docs https://refine.dev/docs/advanced-tutorials/data-provider/graphql/
GraphQL | refine
refine graphql and strapi-graphql data provider built with gql-query-builder and graphql-request is made for GraphQL implemantation. It aims to create a query dynamically with gql-query-builder and send requests with graphql-request.
extended-salmon
extended-salmon2y ago
thanks, for the pointer
Omer
Omer2y ago
BTW If you don't have more than one dataprovider you should not use dataProviderName https://refine.dev/docs/api-reference/core/providers/data-provider/#using-multiple-data-providers
extended-salmon
extended-salmon2y ago
yes good point, forking off the tutorial, so eventually will remove the data provider from the tutorial within the list page, I modified the configuration of the useDataGrid hook to include metadata related to what fields to include in the graphQL response... however, it appears that no request is being sent off... similar behavior as before guess additional information to trouble shoot is that when the list is in a loading state (and times out) no request is sent and a snack bar pops up with,
c is not a function

Error (status code: undefined)
c is not a function

Error (status code: undefined)
extended-salmon
extended-salmon2y ago
i'll try reading an example implementation for reference, https://github.com/refinedev/refine/tree/master/examples/dataProvider/hasura
GitHub
refine/examples/dataProvider/hasura at master · refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/examples/dataProvider/hasura at master · refinedev/refine
Omer
Omer2y ago
Can you share the StackBlitz link where we can reproduce the error?
extended-salmon
extended-salmon2y ago
thanks for your responsiveness. I can get one up maybe later tonight (U.S. tmime zone) Currently taking the approach of forking off the Hasura example. Refine was able to send off the request to the designated Hasura instance, so i can continue exploring/troubleshooting... Might pop in later!