fair-rose•3y ago

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•3y ago

Hey @UsererOfName 👋, Can you check the permissions of your hasura api? Is there an error you get?

fair-roseOP•3y 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,

Omer•3y ago

Hmm could you share list page?

fair-roseOP•3y 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•3y 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.

fair-roseOP•3y ago

thanks, for the pointer

Omer•3y 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

Data Provider | refine

Overview

fair-roseOP•3y 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)

fair-roseOP•3y 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•3y ago

Can you share the StackBlitz link where we can reproduce the error?

fair-roseOP•3y 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!

configure hasura dataProvider

Did you find this page helpful?