conscious-sapphire•4w ago

useCustom with graphQL

Is it possible to use the useCustom with this? const { data: responseData, isLoading: locationLoading, failureReason: failureReason } = useList<GetFieldsFromList<ObdHistoryQuery>>({ resource: "obd_data", filters: [ { field: "vehicle", value: vehicleId, operator: "eq", } ], meta: { gqlQuery: OBD_GET_HISTORY, }, queryOptions: { enabled: true, }, });

8 Replies

kapa.ai•4w ago

Hi @Valugar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to use the useCustom hook with GraphQL in refine. Below is an example of how you can set up the useCustom hook for a GraphQL query. Given your query:

export const USER_BUSINESSES = gql`
  query GetUserBusinesses($userId: String!) {
    userBusinesses(userId: $userId) {
      id
      name
    }
  }
`;

export const USER_BUSINESSES = gql`
  query GetUserBusinesses($userId: String!) {
    userBusinesses(userId: $userId) {
      id
      name
    }
  }
`;

You can use the useCustom hook as follows:

import { useCustom } from "@refinedev/core";
import { gql } from "graphql-tag";

const USER_BUSINESSES = gql`
  query GetUserBusinesses($userId: String!) {
    userBusinesses(userId: $userId) {
      id
      name
    }
  }
`;

const { data, isLoading, error } = useCustom({
  url: "/graphql", // Your GraphQL endpoint
  method: "post",
  config: {
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: USER_BUSINESSES,
      variables: { userId: "some-user-id" },
    }),
  },
  queryOptions: {
    retry: 3,
    enabled: true,
  },
});

import { useCustom } from "@refinedev/core";
import { gql } from "graphql-tag";

const USER_BUSINESSES = gql`
  query GetUserBusinesses($userId: String!) {
    userBusinesses(userId: $userId) {
      id
      name
    }
  }
`;

const { data, isLoading, error } = useCustom({
  url: "/graphql", // Your GraphQL endpoint
  method: "post",
  config: {
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: USER_BUSINESSES,
      variables: { userId: "some-user-id" },
    }),
  },
  queryOptions: {
    retry: 3,
    enabled: true,
  },
});

In this example: - The url is set to your GraphQL endpoint. - The method is set to post. - The config object includes the necessary headers and the body of the request, which contains the GraphQL query and variables. - The queryOptions object includes additional options for the query, such as retry and enabled. For more details, you can refer to the useCustom documentation (https://refine.dev/docs/data/hooks/use-custom/). If you need to invalidate the custom query, you can use the invalidateQueries method from the useQueryClient hook provided by the @tanstack/react-query library. Here is an example:

import { useQueryClient } from "@tanstack/react-query";

const queryClient = useQueryClient();

queryClient.invalidateQueries(["custom-key"]);

import { useQueryClient } from "@tanstack/react-query";

const queryClient = useQueryClient();

queryClient.invalidateQueries(["custom-key"]);

For more information on invalidating queries, refer to the FAQ section of the useCustom documentation (https://refine.dev/docs/data/hooks/use-custom/#faq). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

conscious-sapphire•4w ago

@kapa.ai You didn't answer right. Is there a way to just send a graphQL query very simple, and just get the results back?

kapa.ai•4w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the useCustom hook to send a simple GraphQL query and get the results back. Here is an example of how you can achieve this:

import { useCustom } from "@refinedev/core";
import gql from "graphql-tag";

const USER_BUSINESSES = gql`
  query GetUserBusinesses($userId: String!) {
    userBusinesses(userId: $userId) {
      id
      name
    }
  }
`;

const { data, isLoading, error } = useCustom({
  url: "/graphql", // Your GraphQL endpoint
  method: "post",
  config: {
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: USER_BUSINESSES.loc.source.body,
      variables: { userId: "some-user-id" },
    }),
  },
  queryOptions: {
    enabled: true,
  },
});

import { useCustom } from "@refinedev/core";
import gql from "graphql-tag";

const USER_BUSINESSES = gql`
  query GetUserBusinesses($userId: String!) {
    userBusinesses(userId: $userId) {
      id
      name
    }
  }
`;

const { data, isLoading, error } = useCustom({
  url: "/graphql", // Your GraphQL endpoint
  method: "post",
  config: {
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: USER_BUSINESSES.loc.source.body,
      variables: { userId: "some-user-id" },
    }),
  },
  queryOptions: {
    enabled: true,
  },
});

In this example: - The url is set to your GraphQL endpoint. - The method is set to post. - The config object includes the necessary headers and the body of the request, which contains the GraphQL query and variables. - The queryOptions object includes additional options for the query, such as enabled. This setup will send the GraphQL query and return the results in the data object. For more details, you can refer to the useCustom documentation (https://refine.dev/docs/data/hooks/use-custom/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

conscious-sapphire•4w ago

@kapa.ai I mean using the same dataprovider.

kapa.ai•4w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To use the useCustom hook with a GraphQL query while leveraging the same data provider, you can follow the example below. This example assumes that your data provider is already set up to handle GraphQL queries. Here's how you can use the useCustom hook to send a GraphQL query and get the results back:

import { useCustom, useApiUrl } from "@refinedev/core";

const USER_BUSINESSES_QUERY = `
  query GetUserBusinesses($userId: String!) {
    userBusinesses(userId: $userId) {
      id
      name
    }
  }
`;

const { data, isLoading, error } = useCustom({
  url: "/graphql", // Your GraphQL endpoint
  method: "post",
  config: {
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: USER_BUSINESSES_QUERY,
      variables: { userId: "some-user-id" },
    }),
  },
  queryOptions: {
    enabled: true,
  },
});

import { useCustom, useApiUrl } from "@refinedev/core";

const USER_BUSINESSES_QUERY = `
  query GetUserBusinesses($userId: String!) {
    userBusinesses(userId: $userId) {
      id
      name
    }
  }
`;

const { data, isLoading, error } = useCustom({
  url: "/graphql", // Your GraphQL endpoint
  method: "post",
  config: {
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: USER_BUSINESSES_QUERY,
      variables: { userId: "some-user-id" },
    }),
  },
  queryOptions: {
    enabled: true,
  },
});

In this example: - The url is set to your GraphQL endpoint. - The method is set to post. - The config object includes the necessary headers and the body of the request, which contains the GraphQL query and variables. - The queryOptions object includes additional options for the query, such as enabled. This setup will send the GraphQL query and return the results in the data object. For more details, you can refer to the useCustom documentation (https://refine.dev/docs/data/hooks/use-custom/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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