Live provider example

import { Refine } from "@refinedev/core";  
import { createClient } from "graphql-ws";  
  
import { liveProvider } from "./liveProvider";  
  
const gqlWebSocketClient = createClient({  
 url: "YOUR_WS_URL",  
});  
  
const App: React.FC = () => {  
 return (  
 <Refine liveProvider={liveProvider(gqlWebSocketClient)}>  
 {/* ... */}{" "}  
 </Refine>  
 );  
};  

import { Refine } from "@refinedev/core";  
import { createClient } from "graphql-ws";  
  
import { liveProvider } from "./liveProvider";  
  
const gqlWebSocketClient = createClient({  
 url: "YOUR_WS_URL",  
});  
  
const App: React.FC = () => {  
 return (  
 <Refine liveProvider={liveProvider(gqlWebSocketClient)}>  
 {/* ... */}{" "}  
 </Refine>  
 );  
};  

npm i @refinedev/ably  

npm i @refinedev/ably  

new_locations = await sync_to_async(Location.objects.filter, thread_sensitive=True)(
    **{k: v for k, v in vars(input).items() if v is not None}
)

new_locations = await sync_to_async(Location.objects.filter, thread_sensitive=True)(
    **{k: v for k, v in vars(input).items() if v is not None}
)

new_locations = await sync_to_async(Location.objects.all, thread_sensitive=True)()

new_locations = await sync_to_async(Location.objects.all, thread_sensitive=True)()

import { useSubscription } from "@refinedev/core";

const { data } = useSubscription({
    resource: "locations",
    event: "created",
    variables: { input: { /* your input values */ } },
});

import { useSubscription } from "@refinedev/core";

const { data } = useSubscription({
    resource: "locations",
    event: "created",
    variables: { input: { /* your input values */ } },
});

const { data: updatedData } = useSubscription({
    resource: "locations",
    event: "updated",
    variables: { input: { /* your input values */ } },
});

const { data: deletedData } = useSubscription({
    resource: "locations",
    event: "deleted",
    variables: { input: { /* your input values */ } },
});

const { data: updatedData } = useSubscription({
    resource: "locations",
    event: "updated",
    variables: { input: { /* your input values */ } },
});

const { data: deletedData } = useSubscription({
    resource: "locations",
    event: "deleted",
    variables: { input: { /* your input values */ } },
});

import { useCustom } from "@refinedev/core";
import { LOCATION_GET_HISTORY } from "./queries";

const { data, mutate } = useCustom({
    resource: "locations",
    meta: { gqlMutation: LOCATION_GET_HISTORY },
    variables: { vehicle_id: "your_vehicle_id" },
});

import { useCustom } from "@refinedev/core";
import { LOCATION_GET_HISTORY } from "./queries";

const { data, mutate } = useCustom({
    resource: "locations",
    meta: { gqlMutation: LOCATION_GET_HISTORY },
    variables: { vehicle_id: "your_vehicle_id" },
});

import { useCustom } from "@refinedev/core";
import { LOCATION_GET_HISTORY } from "./queries";

const { data, mutate } = useCustom({
    resource: "locations",
    meta: { gqlMutation: LOCATION_GET_HISTORY },
    config: {
        variables: { vehicle_id: "your_vehicle_id" },
    },
});

import { useCustom } from "@refinedev/core";
import { LOCATION_GET_HISTORY } from "./queries";

const { data, mutate } = useCustom({
    resource: "locations",
    meta: { gqlMutation: LOCATION_GET_HISTORY },
    config: {
        variables: { vehicle_id: "your_vehicle_id" },
    },
});

import { useCustom } from "@pankod/refine";
import { LOCATION_GET_HISTORY } from "./queries";

const { data, mutate } = useCustom({
    resource: "locations",
    meta: { gqlMutation: LOCATION_GET_HISTORY },
    config: {
        payload: { vehicle_id: "your_vehicle_id" },
    },
});

import { useCustom } from "@pankod/refine";
import { LOCATION_GET_HISTORY } from "./queries";

const { data, mutate } = useCustom({
    resource: "locations",
    meta: { gqlMutation: LOCATION_GET_HISTORY },
    config: {
        payload: { vehicle_id: "your_vehicle_id" },
    },
});

import { useCustom } from "@pankod/refine";

const { data, isLoading } = useCustom({
    url: `your_endpoint_url?vehicle_id=your_vehicle_id`,
    method: "get",
});

import { useCustom } from "@pankod/refine";

const { data, isLoading } = useCustom({
    url: `your_endpoint_url?vehicle_id=your_vehicle_id`,
    method: "get",
});

import { useCustom } from "@pankod/refine";

const { data: responseData, isLoading: locationLoading } = useCustom({
    resource: "locations",
    meta: { gqlMutation: LOCATION_GET_HISTORY },
    config: {
        method: "get",
        payload: {
            vehicleId: data.id,
        },
    },
});

import { useCustom } from "@pankod/refine";

const { data: responseData, isLoading: locationLoading } = useCustom({
    resource: "locations",
    meta: { gqlMutation: LOCATION_GET_HISTORY },
    config: {
        method: "get",
        payload: {
            vehicleId: data.id,
        },
    },
});

import { useMutation } from "@apollo/client";
import { LOCATION_GET_HISTORY } from "./queries";

const [getLocationHistory, { data, loading, error }] = useMutation(LOCATION_GET_HISTORY, {
    variables: {
        vehicle_id: "your_vehicle_id",
    },
});

// Call the mutation when needed
getLocationHistory();

import { useMutation } from "@apollo/client";
import { LOCATION_GET_HISTORY } from "./queries";

const [getLocationHistory, { data, loading, error }] = useMutation(LOCATION_GET_HISTORY, {
    variables: {
        vehicle_id: "your_vehicle_id",
    },
});

// Call the mutation when needed
getLocationHistory();

import { Route } from "react-router-dom";
import { Refine } from "@pankod/refine";
import { CarOutlined } from "@ant-design/icons";

import { VehicleList, VehicleCreate, VehicleEdit, VehicleShow, VehicleHistory } from "pages/vehicles";

const App: React.FC = () => (
    <Refine
        resources={[
            {
                name: "vehicles",
                list: VehicleList,
                create: VehicleCreate,
                edit: VehicleEdit,
                show: VehicleShow,
                meta: {
                    canDelete: true,
                    icon: <CarOutlined/>
                },
            },
        ]}
    >
        <Route path="/vehicles/history/:id" element={<VehicleHistory />} />
    </Refine>
);

import { Route } from "react-router-dom";
import { Refine } from "@pankod/refine";
import { CarOutlined } from "@ant-design/icons";

import { VehicleList, VehicleCreate, VehicleEdit, VehicleShow, VehicleHistory } from "pages/vehicles";

const App: React.FC = () => (
    <Refine
        resources={[
            {
                name: "vehicles",
                list: VehicleList,
                create: VehicleCreate,
                edit: VehicleEdit,
                show: VehicleShow,
                meta: {
                    canDelete: true,
                    icon: <CarOutlined/>
                },
            },
        ]}
    >
        <Route path="/vehicles/history/:id" element={<VehicleHistory />} />
    </Refine>
);

import { useNavigation } from "@pankod/refine";
import { Button } from "antd";
import { SearchOutlined } from "@ant-design/icons";

// ...

const { go } = useNavigation();

// ...

<Button
    size="small"
    icon={<SearchOutlined />}
    title={"title"}
    className="refine-edit-button"
    onClick={() => {
        console.log(value)
        return go(`/vehicles/history/${value}`, "replace");
    }}
/>

import { useNavigation } from "@pankod/refine";
import { Button } from "antd";
import { SearchOutlined } from "@ant-design/icons";

// ...

const { go } = useNavigation();

// ...

<Button
    size="small"
    icon={<SearchOutlined />}
    title={"title"}
    className="refine-edit-button"
    onClick={() => {
        console.log(value)
        return go(`/vehicles/history/${value}`, "replace");
    }}
/>

import { useCustom } from "@pankod/refine";

const { data: responseData, isLoading: locationLoading } = useCustom({
    meta: {
        gqlQuery: LOCATION_GET_HISTORY,
        variables: {
            id: vehicleId,
        }
    },
    method: "get",
    url: `${API_URL}`,
    queryOptions: {
        enabled: true,
    },
});

import { useCustom } from "@pankod/refine";

const { data: responseData, isLoading: locationLoading } = useCustom({
    meta: {
        gqlQuery: LOCATION_GET_HISTORY,
        variables: {
            id: vehicleId,
        }
    },
    method: "get",
    url: `${API_URL}`,
    queryOptions: {
        enabled: true,
    },
});

import React, {{ useEffect, useState }} from "react";
import {{ useCustom }} from "@pankod/refine";

const HistoricalVehicleData = () => {
    const [vehicleId, setVehicleId] = useState(null);

    const {{ data: responseData, isLoading: locationLoading }} = useCustom({{
        meta: {{
            gqlQuery: LOCATION_GET_HISTORY,
            variables: {{
                id: vehicleId,
            }}
        }},
        method: "get",
        url: `${{API_URL}}`,
        queryOptions: {{
            enabled: !!vehicleId,
        }},
    }});

    useEffect(() => {
        // Fetch the vehicle ID and update the state
        const id = fetchVehicleId();
        setVehicleId(id);
    }, []); // The dependency array is empty, which means this effect runs once when the component mounts

    // ...
};

import React, {{ useEffect, useState }} from "react";
import {{ useCustom }} from "@pankod/refine";

const HistoricalVehicleData = () => {
    const [vehicleId, setVehicleId] = useState(null);

    const {{ data: responseData, isLoading: locationLoading }} = useCustom({{
        meta: {{
            gqlQuery: LOCATION_GET_HISTORY,
            variables: {{
                id: vehicleId,
            }}
        }},
        method: "get",
        url: `${{API_URL}}`,
        queryOptions: {{
            enabled: !!vehicleId,
        }},
    }});

    useEffect(() => {
        // Fetch the vehicle ID and update the state
        const id = fetchVehicleId();
        setVehicleId(id);
    }, []); // The dependency array is empty, which means this effect runs once when the component mounts

    // ...
};

import { useForm } from "@pankod/refine";
import { notification } from "antd";

// ...

const { formProps, saveButtonProps, onFinish } = useForm({
    onMutationError: (error) => {
        console.log(error); // Log the error for debugging

        // Extract the error message
        const errorMessage = error?.message || "An unknown error occurred";

        // Display a notification with the error message
        notification.error({
            message: "Failed to create gateway",
            description: errorMessage,
        });
    },
    redirect: "list",
});

// ...

<Form
    layout="vertical"
    {...formProps}
    onFinish={(values) => {
        onFinish({ ...values });
    }}
>

import { useForm } from "@pankod/refine";
import { notification } from "antd";

// ...

const { formProps, saveButtonProps, onFinish } = useForm({
    onMutationError: (error) => {
        console.log(error); // Log the error for debugging

        // Extract the error message
        const errorMessage = error?.message || "An unknown error occurred";

        // Display a notification with the error message
        notification.error({
            message: "Failed to create gateway",
            description: errorMessage,
        });
    },
    redirect: "list",
});

// ...

<Form
    layout="vertical"
    {...formProps}
    onFinish={(values) => {
        onFinish({ ...values });
    }}
>

onSearch: (values) => {
    return [
        {
            field: "reportType",
            operator: "eq",
            value: values.name,
        },
    ];
},

onSearch: (values) => {
    return [
        {
            field: "reportType",
            operator: "eq",
            value: values.name,
        },
    ];
},

const { selectProps } = useSelect<ICategory>({
    resource: "reports",
    optionLabel: "labelField", // Replace "labelField" with the actual field
    optionValue: "valueField", // Replace "valueField" with the actual field
});
console.log(selectProps);

const { selectProps } = useSelect<ICategory>({
    resource: "reports",
    optionLabel: "labelField", // Replace "labelField" with the actual field
    optionValue: "valueField", // Replace "valueField" with the actual field
});
console.log(selectProps);

const { selectProps, error } = useSelect({
    resource: "reports",
});

console.log(error);

const { selectProps, error } = useSelect({
    resource: "reports",
});

console.log(error);

const {{ selectProps, data }} = useSelect({{
    resource: "reports",
}});

console.log(data);

const {{ selectProps, data }} = useSelect({{
    resource: "reports",
}});

console.log(data);