Refine•2y ago

Using Non Requirement Variables

I have this:
query DriversList(
$filter: DriverFilter
$sorting: [DriverSort]
$paging: OffsetPaging
) {
drivers(filter: $filter, sorting: $sorting, paging: $paging) {
nodes {
id
name
email
licenseNumber
phone
job {
id
title
industry
description
}
joined
}
totalCount
}
}

But it seems to not work.
How can I have the filter/sort/paging not required?

kapa.ai•4/30/24, 8:32 PM

Hi @Valugar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•4/30/24, 8:32 PM

----------------------
In GraphQL, you can make arguments optional by not including the

after the argument type. The

means that the argument is required. If you want to make the

filter

filter

, , and arguments optional, you can modify your query like this:

This means that you can call the query without providing a

filter

filter

, , or argument and it should work.

However, please note that how these arguments are handled on the server-side is dependent on your GraphQL server implementation. The server needs to be set up to handle these arguments being

null

null

.

If you're using Refine with a GraphQL data provider, you can refer to the Refine documentation on GraphQL usage (https://refine.dev/docs/packages/documentation/data-providers/graphql) for more details on how to structure your queries and mutations.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•4/30/24, 8:32 PM

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

constitutional-coralOP•4/30/24, 8:34 PM

@kapa.ai But when I try to call exactly this, I get the error:
Variable "$sorting" of type "[DriverSort]" used in position expecting type'
[DriverSort!]".

Now over on my backend I have this:

@strawberry.field
async def vehicles(self, info: Info, filter: Optional[VehicleFilter] = None,
sorting: Optional[List[VehicleSort]] = None,
paging: Optional[OffsetPaging] = None) -> Connection[VehicleType]:
result = await _generic_query(info, Vehicle, filter, sorting, paging)
return Connection[VehicleType](nodes=result["nodes"], totalCount=result["totalCount"])

so it is Optional.

kapa.ai•4/30/24, 8:34 PM

Let me check the knowledge base for you. One moment!

kapa.ai•4/30/24, 8:35 PM

----------------------
The error message you're seeing suggests that the argument in your GraphQL schema is expecting an array of where all elements are non-null (). This is different from the in your Python code, which allows for the list itself to be , but doesn't say anything about the elements within the list.

If you want to make the elements within the array optional as well, you would need to adjust your GraphQL schema to reflect this. Unfortunately, without access to your GraphQL schema, I can't provide specific guidance on how to do this.

However, in general, you would need to change the type of the argument from to . This would allow for both the array itself and the elements within the array to be

null

null

.

Please refer to the GraphQL documentation on input types (https://graphql.org/graphql-js/mutations-and-input-types/) for more information on how to structure the input types in your schema.

Also, please note that how these arguments are handled on the server-side is dependent on your GraphQL server implementation. The server needs to be set up to handle these arguments being

null

null

.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•4/30/24, 8:35 PM

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

constitutional-coralOP•4/30/24, 8:36 PM

@kapa.ai
so for the drivers I have this:
@strawberry.input
class DriverFilter:
id: Optional[StringFilter] = None
name: Optional[StringFilter] = None
licensenumber: Optional[StringFilter] = None
email: Optional[StringFilter] = None
phone: Optional[StringFilter] = None
joined: Optional[StringFilter] = None
job: Optional['JobFilter'] = None
and: Optional[List['DriverFilter']] = strawberry.field(name="and", defaultfactory=list)
or: Optional[List['DriverFilter']] = strawberry.field(name="or", default_factory=list)

@strawberry.input
class DriverSort:
field: str
direction: str

As you can see everything is Optional.

kapa.ai•4/30/24, 8:36 PM

Let me check the knowledge base for you. One moment!

kapa.ai•4/30/24, 8:36 PM

----------------------
From your Python code, it's clear that all fields in and are optional. However, the error message you're seeing is coming from your GraphQL schema, not your Python code.

In GraphQL, the

symbol indicates that a field is non-null. If your schema defines the argument as , it means that the array itself can be

null

null

, but it cannot contain any

null

null

elements.

If you want to allow

null

null

elements within the array, you would need to change the type of the argument in your GraphQL schema from to .

Unfortunately, without access to your GraphQL schema, I can't provide specific guidance on how to do this. Please refer to the GraphQL documentation on input types (https://graphql.org/graphql-js/mutations-and-input-types/) for more information on how to structure the input types in your schema.

Also, please note that how these arguments are handled on the server-side is dependent on your GraphQL server implementation. The server needs to be set up to handle these arguments being

null

null

.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•4/30/24, 8:36 PM

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

constitutional-coralOP•4/30/24, 9:03 PM

@kapa.ai Ok good.
Next - how can I filter all locations so that it will only return the latest location for each different gateway.id?

import gql from "graphql-tag";

export const LOCATIONS_LIST_QUERY = gql;

const { data, isLoading, isError } = useList({
resource: "locations",
meta: {
gqlQuery: LOCATIONS_LIST_QUERY
},
liveMode: "auto",
});

kapa.ai•4/30/24, 9:03 PM

Let me check the knowledge base for you. One moment!

kapa.ai•4/30/24, 9:04 PM

----------------------
To return only the latest location for each different , you would need to modify your GraphQL query to include a sorting and filtering mechanism that achieves this. However, this largely depends on the capabilities of your GraphQL server and how it's set up to handle such requests.

Unfortunately, the provided knowledge sources do not contain specific information on how to modify your GraphQL query to achieve this.

However, in general, you might need to sort your locations by

timestamp

timestamp

in descending order and then group them by . This would ensure that for each , the first location in the list is the latest one.

Here's a general idea of how you might structure your query:

In the variable, you would specify that you want to sort by

timestamp

timestamp

in descending order.

Please note that this is a general guidance and might not work out-of-the-box depending on your GraphQL server setup. You should refer to your GraphQL server documentation or consult with your backend team for specific instructions.

For more information on how to use GraphQL with Refine, you can refer to the Refine documentation on GraphQL usage (https://refine.dev/docs/packages/documentation/data-providers/graphql).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•4/30/24, 9:04 PM

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

constitutional-coralOP•4/30/24, 9:09 PM

@kapa.ai But I meant if there is a way to deal with it when making the call:

const { data, isLoading, isError } = useList({
resource: "locations",
meta: {
gqlQuery: LOCATIONS_LIST_QUERY
},
filters: [
{
field: "gateway",
operator: "eq",
value: "true",
}
],
liveMode: "auto",
});

What is a good filter I should make?

kapa.ai•4/30/24, 9:09 PM

Let me check the knowledge base for you. One moment!

kapa.ai•4/30/24, 9:09 PM

----------------------
The filter you should use depends on the specific requirements of your application. However, based on your question, it seems like you want to filter locations based on the .

In the

filters

filters

array, you would specify a filter object where the is , the is (or another appropriate operator based on your needs), and the

value

value

is the specific you want to filter by.

Here's an example:

Please replace with the actual you want to filter by.

However, please note that this will only filter the locations based on the . It will not ensure that only the latest location for each is returned. As mentioned in the previous response, achieving this would likely require modifications to your GraphQL query and/or server implementation.

For more information on how to use filters with Refine, you can refer to the Refine documentation on filtering (https://refine.dev/docs/tutorial/adding-crud-pages/mui/adding-sort-and-filters/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•4/30/24, 9:09 PM

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

constitutional-coralOP•4/30/24, 9:17 PM

@kapa.ai
But I want to get only the latest location per each

kapa.ai•4/30/24, 9:17 PM

Let me check the knowledge base for you. One moment!

kapa.ai•4/30/24, 9:17 PM

----------------------
To get only the latest location for each , you would need to modify your GraphQL query to include a sorting and grouping mechanism that achieves this. However, this largely depends on the capabilities of your GraphQL server and how it's set up to handle such requests.

Unfortunately, the provided knowledge sources do not contain specific information on how to modify your GraphQL query to achieve this.

However, in general, you might need to sort your locations by

timestamp

timestamp

in descending order and then group them by . This would ensure that for each , the first location in the list is the latest one.

Please note that this is a general guidance and might not work out-of-the-box depending on your GraphQL server setup. You should refer to your GraphQL server documentation or consult with your backend team for specific instructions.

For more information on how to use GraphQL with Refine, you can refer to the Refine documentation on GraphQL usage (https://refine.dev/docs/packages/documentation/data-providers/graphql).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•4/30/24, 9:18 PM

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

constitutional-coralOP•4/30/24, 9:20 PM

@kapa.ai So over on the backend I have this:

@strawberry.field
async def locations(self, info: Info, filter: Optional[LocationFilter] = None,
sorting: Optional[List[LocationSort]] = None,
paging: Optional[OffsetPaging] = None) -> Connection[LocationUpdateType]:
result = await _genericquery(info, LocationUpdate, filter, sorting, paging)
return Connection[LocationUpdateType](nodes=result["nodes"], totalCount=result["totalCount"])

with:

@strawberry.input
class LocationFilter:
id: Optional[StringFilter] = None
gateway: Optional[StringFilter] = None
location: Optional[StringFilter] = None
timestamp: Optional[DateTimeFilter] = None
and: Optional[List['LocationFilter']] = strawberry.field(name="and", defaultfactory=list)
or: Optional[List['LocationFilter']] = strawberry.field(name="or", default_factory=list)

@strawberry.input
class LocationSort:
field: str
direction: str

and

async def _genericquery(info: Info, model: Type[Model], filter: Optional[Any] = None,
sorting: Optional[List[Any]] = None, paging: Optional[OffsetPaging] = None) -> Any:
query = model.objects.all()

if filter:
if hasattr(filter, 'vehicle') and getattr(filter.vehicle, 'is', True) is None:
query = apply_no_vehicle_filter(query)
else:
query = apply_filters(query, filter)
if hasattr(filter, 'drivers') and filter.drivers:
query = apply_driver_filters(query, filter.drivers)

if sorting:
query = apply_sorting(query, sorting)

total_count = await sync_to_async(query.count)()
if paging:
query = apply_pagination(query, paging)

results = await sync_to_async(list)(query)
return {
"nodes": results,
"totalCount": total_count
}

Maybe I need to create a custom query function?

kapa.ai•4/30/24, 9:20 PM

Let me check the knowledge base for you. One moment!

kapa.ai•4/30/24, 9:20 PM

----------------------
Yes, you're correct. To get the latest location for each , you would need to modify your function to include a mechanism that groups the locations by and only returns the latest location for each group.

Unfortunately, the provided knowledge sources do not contain specific information on how to modify your function to achieve this.

However, in general, you might need to use Django's and functions to get the latest timestamp for each , and then filter the locations based on these timestamps. Here's a general idea of how you might structure your query:

Please note that this is a general guidance and might not work out-of-the-box depending on your Django setup. You should refer to your Django documentation or consult with your backend team for specific instructions.

For more information on how to use Django's and functions, you can refer to the Django documentation on aggregation (https://docs.djangoproject.com/en/4.0/topics/db/aggregation/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•4/30/24, 9:20 PM

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

constitutional-coralOP•5/1/24, 4:48 AM

@kapa.ai Why am I getting http://localhost:5173/undefined when I try to use:
<Button
type="primary"
onClick={() => {
console.log(marker.gateway.vehicle.id)
return go({
to: ${marker.gateway.vehicle.id}

)}

)}

,
});
}}
style={{ marginTop: '10px' }}
>
View Vehicle Details
</Button>

and I have
http://localhost:5173/vehicles/edit/1
as a valid place.

kapa.ai•5/1/24, 4:48 AM

Let me check the knowledge base for you. One moment!

kapa.ai•5/1/24, 4:49 AM

----------------------
The issue you're experiencing might be due to the function not receiving the correct path. The function from returns a string that represents the path to the edit page of the resource with the given id. However, you're using template literals to construct the path, which might be causing the issue.

Try removing the template literals and pass the parameters directly to the function:

If is

undefined

undefined

, it means that the

id

id

is not available in the object at the time when the button is clicked. You might want to add a check to ensure that is defined before using it.

For more information on how to use the function from , you can refer to the Refine documentation on (https://refine.dev/docs/routing/hooks/use-navigation/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•5/1/24, 4:49 AM

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

constitutional-coralOP•5/1/24, 4:50 AM

@kapa.ai but I am getting

Type 'void' is not assignable to type 'string | Resource | undefined'.ts(2322)
types.d.ts(33, 5): The expected type comes from property 'to' which is declared here on type 'GoConfig | GoConfigWithResource'

kapa.ai•5/1/24, 4:50 AM

Let me check the knowledge base for you. One moment!

kapa.ai•5/1/24, 4:51 AM

----------------------
The error message you're seeing is because the function expects a

string

string

or type for the

to

to

property, but it's receiving a

void

void

type. This is likely because the function is not returning a value.

The function should return a string representing the path to the edit page of the resource with the given id. If it's not returning a value, it might be because the resource or the

id

id

is not defined.

Here's how you should structure your code:

In this code, we're storing the result of the function in the

path

path

variable, and then passing that to the function. This ensures that receives a

string

string

type for the

to

to

property.

If is

undefined

undefined

, it means that the

id

id

----------------------

kapa.ai•5/1/24, 4:51 AM

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

kapa.ai•5/1/24, 4:51 AM

Sorry @Valugar, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

constitutional-coralOP•5/1/24, 4:54 AM

@kapa.ai But again const path = edit("vehicles", marker.gateway.vehicle.id);
returns undefined.

kapa.ai•5/1/24, 4:54 AM

Let me check the knowledge base for you. One moment!

kapa.ai•5/1/24, 4:54 AM

----------------------
If is returning

undefined

undefined

, it suggests that either the resource is not correctly defined in your application, or is

undefined

undefined

.

Here are a few things you can check:

Ensure that is a valid resource in your application. The first argument to the function should be the name of a resource that has been correctly set up in your application.
Check the value of . If it's
```
undefined
```
```
undefined
```
, the function might not be able to construct the correct path. You can do this by adding a before the function call.
If is
```
undefined
```
```
undefined
```
, you need to investigate why this is the case. It could be that the object does not have an
```
id
```
```
id
```
property, or the object itself could be
```
undefined
```
```
undefined
```
.

If you're still having trouble, please provide more context or share more of your code, and I'll do my best to help you troubleshoot the issue.

For more information on how to use the function from , you can refer to the Refine documentation on (https://refine.dev/docs/routing/hooks/use-navigation/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•5/1/24, 4:54 AM

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

constitutional-coralOP•5/1/24, 4:55 AM

@kapa.ai Could the problem be the location I use this function?
<MapContainer
style={{
flex: 1,
width: "100%",
height: "100%",
zIndex: 0,
}}
center={[31.505, -90.09]}
zoom={5}
scrollWheelZoom={true}
maxBounds={[
[-80, -180],
[90, 180],
]}
>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>

<MarkerClusterGroup
chunkedLoading
polygonOptions={{
opacity: 0,
fillOpacity: 0,
}}
iconCreateFunction={customClusterIcon}
disableClusteringAtZoom={17} // Adjust this zoom level based on your needs
maxClusterRadius={40} // Lower value means tighter clustering
>
{markers.map((marker) => (
<Marker
key={marker.gateway.id + marker.timestamp}
position={[marker.location[1], marker.location[0]] as LatLngExpression}
icon={customMarkerIcon(marker.gateway.serialNumber)}
>
{/* Adding Popup component inside Marker */}
<Popup>
<div style={{ width: 'auto' }}>
<Typography.Title level={5}>Gateway Serial: {marker.gateway.serialNumber}</Typography.Title>
<Descriptions size="small" column={1} bordered>
<Descriptions.Item label="Latest Update">
{new Date(marker.timestamp).toLocaleString()}
</Descriptions.Item>
<Descriptions.Item label="Vehicle">
{marker.gateway.vehicle.make} - {marker.gateway.vehicle.model}
</Descriptions.Item>
</Descriptions>
<Button
type="primary"
onClick={() => {
const path = edit("vehicles", "1");

console.log(path)
return go({
to: ,
});
}}
style={{ marginTop: '10px' }}
>
View Vehicle Details
</Button>
</div>
</Popup>

</Marker>
))}
</MarkerClusterGroup>
</MapContainer>

kapa.ai•5/1/24, 4:55 AM

Let me check the knowledge base for you. One moment!

kapa.ai•5/1/24, 4:55 AM

----------------------
The location of your function call within the component should not be an issue. The function from can be used anywhere within a component that is a child of a

Refine

Refine

component.

However, in your code, you're hardcoding the id to in the function call:

This will always generate a path to edit the vehicle with the id of

. If you want to generate a path to edit the vehicle associated with the current marker, you should use instead:

Also, make sure that is defined and is a string. If it's

undefined

undefined

or not a string, the function might not work as expected.

If is still returning

undefined

undefined

, it suggests that either the resource is not correctly defined in your application, or is

undefined

undefined

.

For more information on how to use the function from , you can refer to the Refine documentation on (https://refine.dev/docs/routing/hooks/use-navigation/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•5/1/24, 4:55 AM

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

constitutional-coralOP•5/1/24, 11:37 PM

@kapa.ai I now want to save data.
For example I have this:

const getCenterFromMarkers = (markers: any[]) => {

const { data: geofences, isLoading: isLoadingGeofences, isError, error } = useList<
GetFieldsFromList<GeofencesListQuery>
>({
resource: "events",
meta: {
gqlQuery: GEOFENCES_LIST_QUERY,
},
});

const numMarkers = markers.length;

if (numMarkers === 0) {
return undefined;
}

let sumLat = 0;
let sumLng = 0;

markers.forEach((marker) => {
sumLat += marker.location[1];
sumLng += marker.location[0];
});

return [sumLat / numMarkers, sumLng / numMarkers] as [number, number];
};

And I now want to save new geofences.
What function should I use and how

kapa.ai•5/1/24, 11:37 PM

Let me check the knowledge base for you. One moment!

kapa.ai•5/1/24, 11:38 PM

----------------------
To save new geofences, you can use the

useCreate

useCreate

hook provided by Refine. This hook returns a function that you can call to create a new record for a specific resource.

Here's a basic example of how you might use it:

In this code, should be a TypeScript type that represents the structure of a geofence. You should replace it with the actual type of your geofences.

The function takes an object with a

values

values

property, which should be the new geofence that you want to create. You can call this function whenever you want to create a new geofence, passing the new geofence as an argument.

Please note that this is a general guidance and might not work out-of-the-box depending on your setup. You should adjust the code to fit your specific needs.

For more information on how to use the

useCreate

useCreate

hook, you can refer to the Refine documentation on
useCreate
useCreate
(https://refine.dev/docs/api-reference/hooks/resource/useCreate/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•5/1/24, 11:38 PM

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

constitutional-coralOP•5/1/24, 11:39 PM

@kapa.ai what is the difference between pankod/refine and refinedev/core

kapa.ai•5/1/24, 11:39 PM

Let me check the knowledge base for you. One moment!