foreign-sapphire•8mo ago

useList with Hasura (nested queries)

Not sure my data provider is correctly set up to handle the data response I desire, please see: https://github.com/refinedev/refine/discussions/6089 Thankful for all help.

GitHub

Help with useList and Hasura · refinedev refine · Discussion #6089

I am not able to retrieve data response using Hasura as the data provider, and the hook useList. This is my query: export const DASHBOARD_TASKS_CHART_QUERY = gql` query DashboardTasksChart( $where:...

2 Replies

kapa.ai•8mo ago

Hi @Henrik. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use the useList hook with the Hasura data provider in Refine, you need to ensure that your data provider is correctly set up and that you are using the appropriate types and queries. Here is a step-by-step guide based on the provided knowledge sources: 1. Install the Hasura Data Provider: Make sure you have the Hasura data provider installed in your Refine application:

   npm install @refinedev/hasura

   npm install @refinedev/hasura

Source (https://refine.dev/blog/best-headless-cms/#refine-built-in-hasura-data-provider) 2. Set Up the Data Provider: Configure the Hasura data provider in your application. Here is an example of how to set it up in your App.tsx:

   import { Refine } from "@refinedev/core";
   import dataProvider from "@refinedev/hasura";

   const client = new ApolloClient({
       uri: "YOUR_HASURA_GRAPHQL_ENDPOINT",
       headers: {
           "x-hasura-admin-secret": "YOUR_HASURA_ADMIN_SECRET",
       },
   });

   const App = () => (
       <Refine
           dataProvider={dataProvider(client)}
           // other props
       />
   );

   import { Refine } from "@refinedev/core";
   import dataProvider from "@refinedev/hasura";

   const client = new ApolloClient({
       uri: "YOUR_HASURA_GRAPHQL_ENDPOINT",
       headers: {
           "x-hasura-admin-secret": "YOUR_HASURA_ADMIN_SECRET",
       },
   });

   const App = () => (
       <Refine
           dataProvider={dataProvider(client)}
           // other props
       />
   );

Source (https://github.com/refinedev/refine/issues/4574) 3. Using useList Hook: Use the useList hook to fetch data. Ensure you are using the correct types and queries. Here is an example:

   import { useList, useTable, useForm } from "@refinedev/core";  
   import { GetFields, GetFieldsFromList, GetVariables } from "@refinedev/hasura";  
   
   import { PostsListQuery, PostEditMutation } from "src/graphql/types";  
   import { POSTS_LIST_QUERY, POST_EDIT_MUTATION } from "./queries";  
   
   const { data, isLoading } = useList<GetFieldsFromList<PostsListQuery>>({  
     meta: { gqlQuery: POSTS_LIST_QUERY },  
   });  
   
   const { tableProps } = useTable<GetFieldsFromList<PostsListQuery>>({  
     meta: { gqlQuery: POSTS_LIST_QUERY },  
   });  
   
   const { formProps } = useForm<  
     GetFields<PostEditMutation>,  
     HttpError,  
     GetVariables<PostEditVariables>  
   >({  
     meta: { gqlMutation: POST_EDIT_MUTATION },  
   });

   import { useList, useTable, useForm } from "@refinedev/core";  
   import { GetFields, GetFieldsFromList, GetVariables } from "@refinedev/hasura";  
   
   import { PostsListQuery, PostEditMutation } from "src/graphql/types";  
   import { POSTS_LIST_QUERY, POST_EDIT_MUTATION } from "./queries";  
   
   const { data, isLoading } = useList<GetFieldsFromList<PostsListQuery>>({  
     meta: { gqlQuery: POSTS_LIST_QUERY },  
   });  
   
   const { tableProps } = useTable<GetFieldsFromList<PostsListQuery>>({  
     meta: { gqlQuery: POSTS_LIST_QUERY },  
   });  
   
   const { formProps } = useForm<  
     GetFields<PostEditMutation>,  
     HttpError,  
     GetVariables<PostEditVariables>  
   >({  
     meta: { gqlMutation: POST_EDIT_MUTATION },  
   });

Source (https://refine.dev/docs/data/packages/hasura/#usage-with-graphql-tag) 4. Handling Naming Conventions: If you are using a different naming convention like graphql-default, ensure that your data provider is configured to handle it. Here is an example configuration:

   import { Refine } from "@refinedev/core";
   import dataProvider from "@refinedev/hasura";

   const client = new ApolloClient({
       uri: "YOUR_HASURA_GRAPHQL_ENDPOINT",
       headers: {
           "x-hasura-admin-secret": "YOUR_HASURA_ADMIN_SECRET",
       },
   });

   const App = () => (
       <Refine
           dataProvider={dataProvider(client, { namingConvention: "graphql-default" })}
           // other props
       />
   );

   import { Refine } from "@refinedev/core";
   import dataProvider from "@refinedev/hasura";

   const client = new ApolloClient({
       uri: "YOUR_HASURA_GRAPHQL_ENDPOINT",
       headers: {
           "x-hasura-admin-secret": "YOUR_HASURA_ADMIN_SECRET",
       },
   });

   const App = () => (
       <Refine
           dataProvider={dataProvider(client, { namingConvention: "graphql-default" })}
           // other props
       />
   );

Source (https://github.com/refinedev/refine/issues/4574) By following these steps, you should be able to set up and use the useList hook with the Hasura data provider in your Refine application. If you encounter any issues ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@135097094825443328> kapa.ai is still learning and improving, please let us know how it did by reacting below

useList with Hasura (nested queries)

Did you find this page helpful?