How to define GraphQL Schema?
Hey I am running a backend django + strawberry and refine with graphql to make some calls and read data.
I keep getting
TypeError: Cannot read properties of undefined (reading 'count')
When trying to run a simple:
const { data, isLoading, error } = useList({
resource: "vehicle_list",
meta: { gqlQuery: VEHICLES_LIST_QUERY },
});
with this query:
export const VEHICLES_LIST_QUERY = gql
query VehiclesList {
vehicles {
id
vin
make
model
year
driver {
id
name
email
licenseNumber
}
gateway {
id
serialNumber
firmwareVersion
}
}
}
;
Is there a specific Graphql query response format that suppose to work?
Seems like it is expecting data in a certain format.164 Replies
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, Refine expects the GraphQL response in a certain format. For the
useList hook, the response should include a totalCount field that indicates the total number of records. This is used for pagination purposes.
Here is an example of how the response should look like:
In this example, resource should be replaced with the name of your resource, which is vehicles in your case. The nodes field should contain an array of your resource items. Each item should at least contain an id field.
If your GraphQL server does not return the data in this format, you might need to create a custom data provider to adapt the server response to the format that Refine expects. You can refer to the Refine's GraphQL documentation (https://refine.dev/docs/packages/documentation/data-providers/graphql/) for more information about its GraphQL implementation.
Also, please note that the error message TypeError: Cannot read properties of undefined (reading 'count') indicates that the useList hook is trying to read the count property of an undefined object. This might be caused by the server returning null or undefined for the totalCount field or the entire resource. Please make sure that your server returns a valid object for the resource and a valid number for the totalCount field.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai
so given my schema, how should I change it to fit the expected schema?
@strawberry.type
class VehicleConnection:
nodes: List[VehicleType]
totalCount: int
@strawberry.type
class Query:
@strawberry.field
async def vehicles(self, info: strawberry.Info, where: Optional[JSON] = None, sort: Optional[str] = None, start: Optional[int] = None, limit: Optional[int] = None) -> VehicleConnection:
query = Vehicle.objects.all()
Apply filtering
if where:
query = query.filter(**where)
Apply sorting
if sort:
query = query.order_by(sort)
# Apply pagination
if start is not None and limit is not None:
query = query[start:start + limit]
totalCount = await sync_to_async(query.count)()
vehicle_list = await sync_to_async(list)(query)
return VehicleConnection(nodes=vehicle_list, totalCount=totalCount)
Let me check the knowledge base for you. One moment! :books:
----------------------
Your schema seems to be correctly defined for use with Refine. The
VehicleConnection class has the nodes and totalCount fields, which are required by Refine. The vehicles field in the Query class returns a VehicleConnection, which is also correct.
The nodes field should contain an array of VehicleType objects, and each VehicleType object should at least contain an id field. The totalCount field should contain the total number of VehicleType objects.
Here is an example of how the response should look like:
If you are still encountering the error, it might be due to the server returning null or undefined for the totalCount field or the entire vehicles object. Please make sure that your server returns a valid object for vehicles and a valid number for totalCount.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai But this is exactly the query response I get from my schema.
So it is proper.
Is there something maybe that is badly configured with the data provider?
const { data, isLoading, isError } = useList({
resource: "vehicles_list",
meta: { gqlQuery: VEHICLES_LIST_QUERY },
});
const client = new GraphQLClient(API_URL, {
fetch: (url: string, options: RequestInit) => {
const token = localStorage.getItem("token"); // Ensure you get the token from a secure place
return fetch(url, {
...options,
headers: {
...options.headers,
Authorization:
Bearer ${token},
},
});
},
});
const gqlDataProvider = dataProvider(client);Let me check the knowledge base for you. One moment! :books:
----------------------
Your GraphQL data provider setup seems correct. You're creating a new
GraphQLClient with your API URL and a fetch function that includes the authorization token in the headers. Then, you're passing this client to the dataProvider function from Refine to create the data provider.
However, the issue might be related to the resource name you're using in the useList hook. In your hook, you're using "vehicles_list" as the resource name:
But in your GraphQL query, the resource name is "vehicles":
The resource name in the useList hook should match the resource name in your GraphQL query. Try changing the resource name in the useList hook to "vehicles":
If you're still encountering the error, it might be helpful to log the data and isError variables to see what data you're receiving and whether there are any errors:
This might give you more information about what's going wrong.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok you are right. Now I have this:
export const VehicleListPage = () => {
const { data, isLoading, isError } = useList({
resource: "vehicles",
meta: { gqlQuery: VEHICLES_LIST_QUERY },
});
if (isLoading) {
return <div>Loading...</div>;
}
if (isError) {
return <div>Something went wrong!</div>;
}
console.log(data.data.nodes)
But the data.data.nodes seems to give a warning
Property 'nodes' does not exist on type 'BaseRecord[]'.ts(2339)
Even though it is working
Let me check the knowledge base for you. One moment! :books:
----------------------
The warning you're seeing is a TypeScript type checking warning. It's saying that the
nodes property does not exist on the type BaseRecord[]. This is because the data returned by useList is typed as BaseRecord[], which does not have a nodes property.
To fix this, you can define a type for your vehicle data and use it in the useList hook. Here's an example:
In this example, IVehicle is the type for a vehicle, and IVehicleData is the type for the data returned by the useList hook. The useList hook is parameterized with IVehicleData, which tells TypeScript that data is of type IVehicleData. This way, TypeScript knows that data has a nodes property.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai but the returned data structure is the same - console.log(data) returns:
data
:
nodes
:
(2) [{…}, {…}]
totalCount
:
2
[[Prototype]]
:
Object
total
:
undefined
Let me check the knowledge base for you. One moment! :books:
----------------------
The returned data structure is indeed the same, but TypeScript is a statically typed language, which means it checks the types of variables at compile time. Even though the actual data returned at runtime has a
nodes property, TypeScript doesn't know this at compile time because the BaseRecord[] type doesn't have a nodes property.
To fix the TypeScript warning, you can define a type for the returned data and use it in the useList hook. Here's an example:
In this example, IVehicle is the type for a vehicle, and IVehicleData is the type for the data returned by the useList hook. The useList hook is parameterized with IVehicleData, which tells TypeScript that data is of type IVehicleData. This way, TypeScript knows that data has a nodes property and a totalCount property.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai why is this keep returning the data as data
:
{totalCount: 2, nodes: Array(2)}
total
:
undefined
instead of IVehicleData?
I changed it to fit what you did.
Could it be the resource issue?
Let me check the knowledge base for you. One moment! :books:
----------------------
The
data object returned by the useList hook is of type IVehicleData as you've defined it. However, when you log it to the console with console.log(data), it's displayed as a plain JavaScript object. This is because console.log prints the runtime value of the object, not its TypeScript type.
The total field is undefined because it's not included in the GraphQL response. The useList hook expects the total number of records to be in the totalCount field, not the total field. If you want to access the total number of records, you should use data.totalCount, not data.total.
The resource argument in the useList hook should match the name of the resource in your GraphQL query. If the resource name in the useList hook doesn't match the resource name in the GraphQL query, the hook might not be able to correctly fetch and process the data.
If you're still encountering issues, it might be helpful to check the network tab in your browser's developer tools to see the exact request that's being sent and the response that's being received. This might give you more information about what's going wrong.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai But if you see inside the useList, it has this part:
if (mode === "client") {
data = {
...data,
data: data.data.slice((current - 1) * pageSize, current * pageSize),
total: data.total,
};
}
so it breaks the data differently.
It puts it in the data/total structure.
Let me check the knowledge base for you. One moment! :books:
----------------------
The code snippet you provided is part of Refine's internal implementation of the
useList hook. It's handling the case where pagination is done on the client side (mode === "client"). In this case, it slices the data array to get the current page of data and assigns it to data.data, and it assigns the total number of records to data.total.
However, this doesn't affect the structure of the data returned by the useList hook. The useList hook still returns an object with a data property, which is the data fetched from the server. The structure of this data object depends on the server response and the type parameter you pass to useList.
In your case, you're passing IVehicleData as the type parameter to useList, so TypeScript expects data to be of type IVehicleData. This means data should have a nodes property, which is an array of IVehicle objects, and a totalCount property, which is a number.
If you want to access the total number of records, you should use data.totalCount, not data.total. The total field is not included in the GraphQL response, so it's undefined. The total number of records is in the totalCount field.
Here's how you can access the data and the total count:
If you're still encountering issues, it might be helpful to check the network tab in your browser's developer tools to see the exact request that's being sent and the response that's being received. This might give you more information about what's going wrong.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai So I need to do something like data = data.data
to then be able to use data.nodes
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, if the data returned by the
useList hook is structured in a way that the actual data is under data.data, you would need to reassign data to data.data to access nodes directly from data. Here's how you can do it:
However, please note that this is not the typical usage of the useList hook. Normally, you should be able to access nodes and totalCount directly from data without having to reassign data to data.data. If you need to do this, it might indicate that there's something unusual about the way your GraphQL server is returning data or the way your data provider is processing it.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Still something doesn't make sense.
The data returned from the useList is:
data
:
{totalCount: 2, nodes: Array(2)}
total
:
undefined
This is the console log. You can't argure with this.
And it is different than the graphql response.
So useList is modifying the data and parsing it differently.
Why is this?
How can I change this?
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useList hook in Refine does indeed modify the data returned from the server. It wraps the server response in an object with data and total properties. The data property contains the actual data returned from the server, and the total property contains the total number of records.
In your case, the server response is {totalCount: 2, nodes: Array(2)}, so the useList hook wraps this in an object like this: {data: {totalCount: 2, nodes: Array(2)}, total: undefined}.
The total property is undefined because the server response does not include a total field. The useList hook expects the total number of records to be in the totalCount field, not the total field.
If you want to access the total number of records, you should use data.totalCount, not data.total. Here's how you can do it:
If you want to change how the useList hook processes the server response, you would need to create a custom data provider. The data provider is responsible for making requests to the server and processing the server responses. You can create a custom data provider that processes the server responses in a way that fits your needs. You can refer to the Refine's documentation on data providers (https://refine.dev/docs/data/data-provider/) for more information on how to create a custom data provider.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok so how can I change the schema to have the 'total' populate data and not be undefined?
the TotalCount is my addition I added to the schema but I can change it.
Let me check the knowledge base for you. One moment! :books:
----------------------
To have the
total field populated in the data returned by the useList hook, you would need to include a total field in the server response. This means you would need to change your GraphQL schema and resolver to include a total field.
Here's how you can do it:
In this example, I've changed totalCount to total in the VehicleConnection class, the vehicles resolver, and the return statement of the vehicles resolver.
After making these changes, the total field should be populated in the data returned by the useList hook:
Please note that this will change the structure of the server response, so you might need to update other parts of your code that depend on the server response.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Not working. The total is nested inside data.data.total, where the useList creates the total at the data.total.
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useList hook from Refine expects the total number of records to be in the totalCount field of the response. If you want to use total instead of totalCount, you would need to create a custom data provider to adapt the server response to the format that Refine expects.
Here's an example of how you can create a custom data provider:
In this example, I'm creating a custom data provider that wraps the base GraphQL data provider from Refine. I'm overriding the getList method to adapt the server response to the format that Refine expects. The getList method fetches the data using the base data provider, then it returns an object with data and total properties. The data property contains the nodes field from the server response, and the total property contains the total field from the server response.
After creating this custom data provider, you can use it in your app like this:
Please note that this is a simplified example. Depending on your needs, you might need to customize the data provider further. You can refer to the Refine's documentation on data providers (https://refine.dev/docs/data/data-provider/) for more information on how to create a custom data provider.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok thank you.
Now for another question I have about the schema for the graphql.
I am using Django to create the backend server with strawberry.
Are there tools I can use to create schemas that will work with refine graphql?
I am currently creating the schema as I see fit, but I don't know if the query response works with refine graphql.
Let me check the knowledge base for you. One moment! :books:
----------------------
Refine's GraphQL data provider is built to work with any GraphQL API, so you can use any tool to create your GraphQL schema as long as it follows the GraphQL specification. Strawberry is a good choice for creating GraphQL APIs in Django.
However, there are a few things to keep in mind to ensure that your GraphQL API works well with Refine:
1. Resource Names: The resource names in your GraphQL schema should match the resource names you use in Refine. For example, if you have a
vehicles resource in Refine, you should have a vehicles query in your GraphQL schema.
2. Pagination: Refine expects the server to handle pagination. This means your GraphQL queries should accept arguments for pagination (such as start and limit), and your server should return the correct page of data based on these arguments.
3. Sorting and Filtering: Refine also expects the server to handle sorting and filtering. Your GraphQL queries should accept arguments for sorting and filtering, and your server should return the data sorted and filtered based on these arguments.
4. Total Count: Refine expects the total number of records to be in the totalCount field of the response. If you want to use a different field for the total count, you would need to create a custom data provider to adapt the server response to the format that Refine expects.
Here's an example of how you can define a GraphQL schema in Strawberry that works with Refine:
In this example, Vehicle is a type that represents a vehicle, and VehicleConnection is a type that represents a page of vehicles. The vehicles field in the Query type fetches a page of vehicles based on the start, limit, sort, and where arguments.
You can refer to the Strawberry documentation (https://strawberry.rocks/docs) for more information on how to create GraphQL schemas in Strawberry.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok so given this architecture, how should I set this:
export const VEHICLES_LIST_QUERY = gql
query vehicles($where: JSON) {
vehicles(where: $where) {
totalCount
nodes {
id
vin
make
model
year
driver {
id
name
email
licenseNumber
}
gateway {
id
serialNumber
firmwareVersion
}
}
}
}
;
And the call:
const { data, isLoading, isError } = useList<GetFieldsFromList<VehiclesListQuery>>({
meta: { gqlQuery: VEHICLES_LIST_QUERY },
});Let me check the knowledge base for you. One moment! :books:
----------------------
Your GraphQL query and
useList hook call look correct. The VEHICLES_LIST_QUERY is a GraphQL query that fetches a list of vehicles with their associated drivers and gateways. It accepts a where argument for filtering the vehicles.
The useList hook is used to fetch the list of vehicles. You're passing VEHICLES_LIST_QUERY to the useList hook via the meta property, which tells the hook to use this query to fetch the data.
Here's how you can use the useList hook to fetch and display a list of vehicles:
In this example, VehicleList is a React component that uses the useList hook to fetch a list of vehicles and displays them in a list. If the data is loading, it displays a loading message. If there's an error, it displays an error message.
Please replace GetFieldsFromList and VehiclesListQuery with your actual types. These types should be generated from your GraphQL schema. You can use a tool like GraphQL Code Generator (https://www.graphql-code-generator.com/) to generate TypeScript types from your GraphQL schema.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai But it is missing the:
where, sort, start, limit.
How can I add them?
Let me check the knowledge base for you. One moment! :books:
----------------------
You can add
where, sort, start, and limit as variables to your GraphQL query and pass them as parameters to the useList hook. Here's how you can do it:
In this example, I've added where, sort, start, and limit as variables to the VEHICLES_LIST_QUERY and passed them as parameters to the useList hook. You should replace the where, sort, start, and limit values with your actual values.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai There are no variables with useList:
resource: resourceFromProp,
config,
filters,
hasPagination,
pagination,
sorters,
queryOptions,
successNotification,
errorNotification,
meta,
metaData,
liveMode,
onLiveEvent,
liveParams,
dataProviderName,
overtimeOptions,
Let me check the knowledge base for you. One moment! :books:
----------------------
You're correct, my apologies for the confusion. The
useList hook in Refine doesn't directly accept a variables option. Instead, it accepts options for filters, sorters, and pagination which are used to construct the variables for the GraphQL query.
Here's how you can pass where, sort, start, and limit to the useList hook:
In this example, I've passed filters, sorters, and pagination to the useList hook. The filters option is used for the where condition, the sorters option is used for the sort condition, and the pagination option is used for the start and limit. You should replace the filters, sorters, and pagination values with your actual values.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Do I need to modify then my backend?
for example I have this:
export const VehicleListPage = () => {
const { data, isLoading, isError } = useList<GetFieldsFromList<VehiclesQuery>>({
resource: "vehicles",
meta: { gqlQuery: VEHICLES_LIST_QUERY },
filters: [
{
field: "year",
operator: "contains",
value: "2020",
},
],
sorters: [{ field: "id", order: "asc" }], // replace with your sort condition
pagination: { current: 1, pageSize: 10 }, // replace with your start index and limit
});
But I get some errors when trying to execute this. Here is the backend: @strawberry.type class Query: @strawberry.field async def vehicles(self, info: strawberry.Info, where: Optional[JSON] = None, sort: Optional[str] = None, start: Optional[int] = None, limit: Optional[int] = None) -> VehicleConnection: query = Vehicle.objects.all()
# Apply filtering if where: query = query.filter(**where)
# Apply sorting if sort: query = query.order_by(sort) # Apply pagination if start is not None and limit is not None: query = query[start:start + limit] totalCount = await sync_to_async(query.count)() vehicles = await sync_to_async(list)(query) return VehicleConnection(nodes=vehicles, totalCount=totalCount) And I get the error: Cannot resolve keyword 'year_contains' into field. Choices are: dash_camera, dash_camera_id, driver, driver_id, event, gateway, gateway_id, id, make, model, vin, year
But I get some errors when trying to execute this. Here is the backend: @strawberry.type class Query: @strawberry.field async def vehicles(self, info: strawberry.Info, where: Optional[JSON] = None, sort: Optional[str] = None, start: Optional[int] = None, limit: Optional[int] = None) -> VehicleConnection: query = Vehicle.objects.all()
# Apply filtering if where: query = query.filter(**where)
# Apply sorting if sort: query = query.order_by(sort) # Apply pagination if start is not None and limit is not None: query = query[start:start + limit] totalCount = await sync_to_async(query.count)() vehicles = await sync_to_async(list)(query) return VehicleConnection(nodes=vehicles, totalCount=totalCount) And I get the error: Cannot resolve keyword 'year_contains' into field. Choices are: dash_camera, dash_camera_id, driver, driver_id, event, gateway, gateway_id, id, make, model, vin, year
Let me check the knowledge base for you. One moment! :books:
----------------------
The error message suggests that Django is unable to resolve the
year_contains keyword into a field. This is because Django's filter method uses the exact field names in your model, and year_contains is not a valid field name.
In Django, to perform a "contains" operation, you would use the __contains or __icontains (case-insensitive) lookup. For example, to filter vehicles where the year field contains "2020", you would do Vehicle.objects.filter(year__contains='2020').
However, the where object you're passing from the frontend is { field: "year", operator: "contains", value: "2020" }, and you're passing this object directly to the filter method. Django doesn't understand this format.
You need to convert this object into a format that Django understands. Here's how you can do it:
In this example, I'm converting the where object into a django_where dictionary that Django understands, and then I'm passing this dictionary to the filter method.
Please note that this is a simplified example. Depending on your needs, you might need to handle more complex where objects that contain multiple conditions or nested conditions. You might also need to map different operators to different Django lookups. For example, you might want to map "contains" to __contains, "startswith" to __startswith, "endswith" to __endswith, etc.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai We are almost there but there is still an error:
le "/home/ubuntu/DrivePulse_BE/crm/schema.py", line 27, in vehicles
django_where = {f"{where['field']}__{where['operator']}": where['value']}
KeyError: 'field'
Remind you this is how the call is made:
export const VEHICLES_LIST_QUERY = gql
query vehicles($where: JSON, $sort: String, $start: Int, $limit: Int) {
vehicles(where: $where, sort: $sort, start: $start, limit: $limit) {
totalCount
nodes {
id
vin
make
model
year
driver {
id
name
email
licenseNumber
}
gateway {
id
serialNumber
firmwareVersion
}
}
}
}
;Let me check the knowledge base for you. One moment! :books:
----------------------
The error message suggests that the
where object you're passing from the frontend doesn't have a field property. This is likely because the where object is an array of filter conditions, not a single filter condition.
In your frontend code, you're passing filters as an array:
So in your backend code, you need to handle where as an array. Here's how you can do it:
In this example, I'm handling where as an array of conditions. For each condition, I'm converting it into a format that Django understands and applying it to the query.
Please note that this will apply all conditions with an AND logic. If you want to apply conditions with an OR logic, you would need to use Django's Q objects. You might also need to handle more complex conditions that contain nested conditions.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok so I still got errors:
File "/home/ubuntu/DrivePulse_BE/crm/schema.py", line 29, in vehicles
django_where = {f"{condition['field']}{condition['operator']}": condition['value']}
KeyError: 'field'
And when I printed the 'where' value we get as in here:
@strawberry.type
class Query:
@strawberry.field
async def vehicles(self, info: strawberry.Info, where: Optional[List[JSON]] = None, sort: Optional[str] = None, start: Optional[int] = None, limit: Optional[int] = None) -> VehicleConnection:
query = Vehicle.objects.all()
# Apply filtering
if where:
for condition in where:
print(condition)
# Convert the condition into a format that Django understands
django_where = {f"{condition['field']}{condition['operator']}": condition['value']}
query = query.filter(**django_where)
the print of it is: {'year_contains': '2020'} So seems like refine is modifying the call somehow
the print of it is: {'year_contains': '2020'} So seems like refine is modifying the call somehow
Let me check the knowledge base for you. One moment! :books:
----------------------
It seems like the
where object you're receiving in your backend is not in the format you're expecting. Instead of receiving an array of conditions like [{ field: "year", operator: "contains", value: "2020" }], you're receiving an object like { year_contains: "2020" }.
This is likely because Refine is converting the filters array into a where object before sending it to the server. This is the default behavior of Refine's GraphQL data provider.
To handle this in your backend, you can modify your code to expect a where object instead of an array of conditions. Here's how you can do it:
In this example, I'm handling where as an object. For each key-value pair in the object, I'm splitting the key into field and operator, and then I'm converting the condition into a format that Django understands.
Please note that this assumes that the keys in the where object are in the format field_operator. If Refine sends keys in a different format, you would need to adjust the code accordingly.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai
ok I now have an issue with this mutation:
export const ACCOUNT_SETTINGS_UPDATE_USER_MUTATION = gql
mutation AccountSettingsUpdateUser($input: UpdateOneUserInput!) {
registerOrUpdateUser(input: $input) {
id
name
email
avatar
jobTitle
phone
timezone
}
}
;
used for example here:
<Typography.Title
level={3}
style={{ padding: 0, margin: 0, width: "100%" }}
className={styles.title}
editable={{
onChange(value) {
updateMutation({
resource: "users",
id,
values: { name: value },
mutationMode: "optimistic",
successNotification: false,
meta: {
gqlMutation: ACCOUNT_SETTINGS_UPDATE_USER_MUTATION,
},
});
},
triggerType: ["text", "icon"],
icon: <EditOutlined className={styles.titleEditIcon} />,
}}
>
I am getting the error:
"message": "Variable '$input' of required type 'UpdateOneUserInput!' was not provided.",
Here is the example mutation from the network tab:
mutation AccountSettingsUpdateUser($input: UpdateOneUserInput!) {
registerOrUpdateUser(input: $input) {
id
name
email
avatar
jobTitle
phone
timezone
}
}
variables:
{
"id": "1",
"data": {
"name": "alzcorp@gmsdfail.com"
}
}Let me check the knowledge base for you. One moment! :books:
----------------------
The error message suggests that the
input variable required by the AccountSettingsUpdateUser mutation was not provided. This is likely because the values object you're passing to the updateMutation function doesn't match the structure expected by the input variable.
In your frontend code, you're passing values as { name: value }:
But in your GraphQL mutation, the input variable is of type UpdateOneUserInput!, which likely expects an object with id and data properties:
To fix this, you can modify your frontend code to pass values as { id: id, data: { name: value } }:
In this example, I'm passing values as { id: id, data: { name: value } }, which matches the structure expected by the input variable. You should replace id and value with your actual values.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok I have another issue now,
I am trying to create a custom data-provider.ts for graphql.
I have this part:
const client = new GraphQLClient(API_URL, {
fetch: (input: RequestInfo | URL, init?: RequestInit) => {
const token = localStorage.getItem("token"); // Ensure you get the token from a secure place
const headers = new Headers(init?.headers);
headers.append("Authorization",
Bearer ${token});
return fetch(input, {
...init,
headers: headers,
});
},
});
const baseData = dataProvider(client);
but I am getting a weird error on
const baseData = dataProvider(client);
Argument of type 'import("/home/ubuntu/DrivePulse_CRM/node_modules/graphql-request/build/esm/index").GraphQLClient' is not assignable to parameter of type 'import("/home/ubuntu/DrivePulse_CRM/node_modules/@refinedev/graphql/node_modules/graphql-request/build/esm/index").GraphQLClient'.
Types have separate declarations of a private property 'url'.ts(2345)Let me check the knowledge base for you. One moment! :books:
----------------------
The error message suggests that there's a conflict between two different versions of
graphql-request in your project. One version is used by your project directly, and another version is used by the @refinedev/graphql package.
This can happen when you install graphql-request as a direct dependency of your project, and @refinedev/graphql also installs its own version of graphql-request as a nested dependency.
To fix this, you can try the following steps:
1. Uninstall the graphql-request package from your project:
or
2. Delete the node_modules folder and the package-lock.json file (or yarn.lock file if you're using Yarn) from your project.
3. Reinstall your project's dependencies:
or
This will ensure that your project and the @refinedev/graphql package are using the same version of graphql-request.
If you still need to use graphql-request in your project, you can import it from @refinedev/graphql instead of installing it as a direct dependency:
This will ensure that you're using the same version of graphql-request as @refinedev/graphql.
If the issue persists, it might be a bug in the @refinedev/graphql package. In this case, you can report the issue (https://github.com/refinedev/refine/issues) to the Refine team on GitHub.
Source (https://github.com/refinedev/refine/issues/1929)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok good.
Now I try to continue create a dataprovider and I have:
const NewdataProvider = {
...baseData,
getList: async (resource: any, params: any) => {
// implement actual functionality here, for example:
const response = await baseData.custom(resource, params);
return {
data: response?.data.nodes,
total: response?.data.total,
};
}
};
But seems like it is incorrect with the custom expecting 1 input.
Let me check the knowledge base for you. One moment! :books:
----------------------
The
custom method of the data provider expects a single argument of type CustomParams. This argument should be an object that includes properties like url, method, filters, sorters, payload, query, headers, and meta.
Here's how you can call the custom method:
In this example, I'm passing an object to the custom method that includes properties like url, method, filters, sorters, payload, query, headers, and meta. You should replace /api/${resource} and "GET" with your actual URL and HTTP method, and you should replace params.filters, params.sorters, params.payload, params.query, params.headers, and params.meta with your actual parameters.
Please note that this is a simplified example. Depending on your needs, you might need to handle more complex parameters or add additional logic.
Source (https://refine.dev/docs/data/hooks/use-custom#configpayload)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai But I want it to be a custom graphql.
this is how I have it:
const client = new GraphQLClient(API_URL, {
fetch: (input: RequestInfo | URL, init?: RequestInit) => {
const token = localStorage.getItem("token"); // Ensure you get the token from a secure place
const headers = new Headers(init?.headers);
headers.append("Authorization",
Bearer ${token});
return fetch(input, {
...init,
headers: headers,
});
},
});
const baseData = dataProvider(client);
const wsClient = graphqlWS.createClient({
url: WS_URL,
});
const NewdataProvider = {
...baseData,
getList: async (resource: any, params: any) => {
// implement actual functionality here, for example:
const response = await baseData.custom(resource, params);
return {
data: response?.data.nodes,
total: response?.data.total,
};
}
};Let me check the knowledge base for you. One moment! :books:
----------------------
If you want to use a custom GraphQL query for the
getList method, you can use the gqlQuery field in the meta property of the params object. This field accepts a GraphQL operation as graphql's DocumentNode type.
Here's how you can do it:
In this example, I'm defining a custom GraphQL query MY_CUSTOM_QUERY and passing it to the custom method via the gqlQuery field in the meta property of the params object. You should replace MyCustomQuery with your actual GraphQL query.
Please note that this is a simplified example. Depending on your needs, you might need to handle more complex queries or add additional logic.
Source (https://refine.dev/docs/guides-concepts/data-fetching#graphql)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok good, now I have issues with mutation.
More specifically, I have this:
<Typography.Title
level={3}
style={{ padding: 0, margin: 0, width: "100%" }}
className={styles.title}
editable={{
onChange(value) {
updateMutation({
resource: "users",
id,
values: {
data: { name: value }
},
mutationMode: "optimistic",
successNotification: false,
meta: {
gqlMutation: ACCOUNT_SETTINGS_UPDATE_USER_MUTATION,
},
});
},
triggerType: ["text", "icon"],
icon: <EditOutlined className={styles.titleEditIcon} />,
}}
>
That I try to update a mutation.
export const ACCOUNT_SETTINGS_UPDATE_USER_MUTATION = gql
export type UpdateOneUserInput = { id: string; update: UserUpdateInput; };
Nor its not aligned with how the backend expects it: @strawberry.type class Mutation: @strawberry.mutation async def register_or_update_user(self, info: Info, id: Optional[str], data: UserUpdateInput) -> UserType: if id: user = await sync_to_async(User.objects.get)(id=id) if data.email: user.email = data.email if data.name: user.name = data.name if data.avatar: user.avatar = data.avatar if data.job_title: user.job_title = data.job_title if data.phone: user.phone = data.phone if data.timezone: user.timezone = data.timezone await sync_to_async(user.save)() else: user, created = await sync_to_async(User.objects.update_or_create)( defaults={ 'email': data.email, 'name': data.name, 'avatar': data.avatar, 'job_title': data.job_title, 'phone': data.phone, 'timezone': data.timezone }, ) return user for this: @strawberry.input class UserUpdateInput: email: Optional[str] = None name: Optional[str] = None avatar: Optional[str] = None job_title: Optional[str] = None phone: Optional[str] = None timezone: Optional[str] = None
mutation AccountSettingsUpdateUser($id: String, $data: UserUpdateInput!) {
registerOrUpdateUser(id: $id, update: $data) {
id
name
email
avatar
jobTitle
phone
timezone
}
}
;
and this is how the call looks:
mutation AccountSettingsUpdateUser($id: String, $data: UserUpdateInput!) {
registerOrUpdateUser(id: $id, data: $data) {
id
name
email
avatar
jobTitle
phone
timezone
}
}
with these variables:
{
"input": {
"id": "1",
"update": {
"name": "alzcdscorp@gmail.com"
}
}
}
But it's not how the types are configured:
export type UserUpdateInput = {
email?: string | null;
name?: string | null;
avatar?: string | null;
jobTitle?: string | null;
phone?: string | null;
timezone?: string | null;
role?: string | null;
};
export type UpdateOneUserInput = { id: string; update: UserUpdateInput; };
Nor its not aligned with how the backend expects it: @strawberry.type class Mutation: @strawberry.mutation async def register_or_update_user(self, info: Info, id: Optional[str], data: UserUpdateInput) -> UserType: if id: user = await sync_to_async(User.objects.get)(id=id) if data.email: user.email = data.email if data.name: user.name = data.name if data.avatar: user.avatar = data.avatar if data.job_title: user.job_title = data.job_title if data.phone: user.phone = data.phone if data.timezone: user.timezone = data.timezone await sync_to_async(user.save)() else: user, created = await sync_to_async(User.objects.update_or_create)( defaults={ 'email': data.email, 'name': data.name, 'avatar': data.avatar, 'job_title': data.job_title, 'phone': data.phone, 'timezone': data.timezone }, ) return user for this: @strawberry.input class UserUpdateInput: email: Optional[str] = None name: Optional[str] = None avatar: Optional[str] = None job_title: Optional[str] = None phone: Optional[str] = None timezone: Optional[str] = None
Let me check the knowledge base for you. One moment! :books:
----------------------
The issue seems to be that the structure of the
values object you're passing to the updateMutation function doesn't match the structure expected by the UpdateOneUserInput type.
In your frontend code, you're passing values as { data: { name: value } }:
But in your GraphQL mutation, the UpdateOneUserInput type expects an object with id and update properties:
To fix this, you can modify your frontend code to pass values as { id: id, update: { name: value } }:
In this example, I'm passing values as { id: id, update: { name: value } }, which matches the structure expected by the UpdateOneUserInput type. You should replace id and value with your actual values.
Please note that this is a simplified example. Depending on your needs, you might need to handle more complex parameters or add additional logic.
Source (https://refine.dev/docs/data/hooks/use-update#mutation-parameters-1)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok I have a question about this:
const { mutate: updateMutation } = useUpdate<
GetFields<AccountSettingsUpdateUserMutation>,
HttpError,
AccountSettingsUpdateUserMutationVariables
>();
updateMutation({
resource: "users",
id,
values: {
id: id,
data: { name: value }
},
mutationMode: "optimistic",
successNotification: false,
meta: {
gqlMutation: ACCOUNT_SETTINGS_UPDATE_USER_MUTATION,
},
});
Seems like something is not working well.
Not sure how to define the schema properly for this.
This is the current schema:
export const ACCOUNT_SETTINGS_UPDATE_USER_MUTATION = gql
mutation AccountSettingsUpdateUser($id: String, $data: UserUpdateInput!) {
registerOrUpdateUser(id: $id, data: $data) {
id
name
email
avatar
jobTitle
phone
timezone
}
}
;
What should the call then look like?
Is this a proper configuration?Let me check the knowledge base for you. One moment! :books:
----------------------
The
useUpdate hook from Refine is designed to work with the standard update mutation provided by Refine's GraphQL data provider. If you want to use a custom mutation, you need to pass it via the meta.gqlMutation property.
In your case, the ACCOUNT_SETTINGS_UPDATE_USER_MUTATION expects two variables: $id and $data. The useUpdate hook will automatically map the id and values parameters to these variables. So, you should pass the id and values parameters like this:
In this example, id is mapped to $id and values is mapped to $data. The resource parameter is not used in this case, but it's still required by the useUpdate hook.
Please note that this assumes that the UserUpdateInput type in your GraphQL schema is defined like this:
If your UserUpdateInput type expects a different structure, you need to adjust the values parameter accordingly.
Source (https://refine.dev/docs/data/hooks/use-update#mutation-parameters-1)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai This is the types:
export type UserUpdateInput = {
email?: string | null;
name?: string | null;
avatar?: string | null;
jobTitle?: string | null;
phone?: string | null;
timezone?: string | null;
role?: string | null;
};
export type UpdateOneUserInput = { id: string; update: UserUpdateInput; };
Do I need to change them?
export type UpdateOneUserInput = { id: string; update: UserUpdateInput; };
Do I need to change them?
Let me check the knowledge base for you. One moment! :books:
----------------------
Given your
UpdateOneUserInput type, the values object you pass to the updateMutation function should have the structure { id: string; update: UserUpdateInput; }.
The UserUpdateInput type, in turn, should be an object with properties matching the fields of the user that you want to update. In your case, you're updating the name field, so the UserUpdateInput object should be { name: value }.
Here's how you can call the updateMutation function:
In this example, id is the ID of the user you want to update, and value is the new name of the user. You should replace id and value with your actual values.
Please note that this is a simplified example. Depending on your needs, you might need to handle more complex parameters or add additional logic.
Source (https://refine.dev/docs/data/hooks/use-update#mutation-parameters-1)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai This is then the call being made when I look at the network tab with the configuration as you did:
mutation AccountSettingsUpdateUser($id: String, $update: UserUpdateInput!) {
registerOrUpdateUser(id: $id, data: $update) {
id
name
email
avatar
jobTitle
phone
timezone
}
}
{
"input": {
"id": "1",
"update": {
"id": "1",
"update": {
"name": "alzcorp@gmadsil.com"
}
}
}
}
But I get this error:
"message": "Variable '$update' of required type 'UserUpdateInput!' was not provided.",
Do I need to change my backend schema?
@strawberry.mutation
async def register_or_update_user(self, info: Info, id: Optional[str], data: UserUpdateInput) -> UserType:
if id:
user = await sync_to_async(User.objects.get)(id=id)
if data.email:
user.email = data.email
if data.name:
user.name = data.name
if data.avatar:
user.avatar = data.avatar
if data.job_title:
user.job_title = data.job_title
if data.phone:
user.phone = data.phone
if data.timezone:
user.timezone = data.timezone
await sync_to_async(user.save)()
else:
user, created = await sync_to_async(User.objects.update_or_create)(
defaults={
'email': data.email,
'name': data.name,
'avatar': data.avatar,
'job_title': data.job_title,
'phone': data.phone,
'timezone': data.timezone
},
)
return user
Let me check the knowledge base for you. One moment! :books:
----------------------
The error message suggests that the
$update variable required by the AccountSettingsUpdateUser mutation was not provided. This is likely because the values object you're passing to the updateMutation function doesn't match the structure expected by the UserUpdateInput type.
In your frontend code, you're passing values as {{ id: id, update: {{ name: value }} }}:
But in your GraphQL mutation, the UserUpdateInput type expects an object with name property:
To fix this, you can modify your frontend code to pass values as {{ id: id, update: {{ name: value }} }}:
In this example, id is the ID of the user you want to update, and value is the new name of the user. You should replace id and value with your actual values.
Please note that this is a simplified example. Depending on your needs, you might need to handle more complex parameters or add additional logic.
Source (https://refine.dev/docs/data/hooks/use-update#mutation-parameters-1)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai That is completely wrong.
I send it like so:
updateMutation({
resource: "users",
id: id,
values: {
id: id,
update: { name: value }
},
mutationMode: "optimistic", successNotification: false, meta: { gqlMutation: ACCOUNT_SETTINGS_UPDATE_USER_MUTATION, }, }); export const ACCOUNT_SETTINGS_UPDATE_USER_MUTATION = gql
export type UpdateOneUserInput = { id: string; update: UserUpdateInput; };
I get this mutation: mutation AccountSettingsUpdateUser($id: String, $update: UserUpdateInput!) { registerOrUpdateUser(id: $id, data: $update) { id name email avatar jobTitle phone timezone } } { "input": { "id": "1", "update": { "id": "1", "update": { "name": "alzcorp@gmadsil.com" } } } }
mutationMode: "optimistic", successNotification: false, meta: { gqlMutation: ACCOUNT_SETTINGS_UPDATE_USER_MUTATION, }, }); export const ACCOUNT_SETTINGS_UPDATE_USER_MUTATION = gql
mutation AccountSettingsUpdateUser($id: String, $update: UserUpdateInput!) {
registerOrUpdateUser(id: $id, data: $update) {
id
name
email
avatar
jobTitle
phone
timezone
}
}
;
With these types:
export type UserUpdateInput = {
email?: string | null;
name?: string | null;
avatar?: string | null;
jobTitle?: string | null;
phone?: string | null;
timezone?: string | null;
role?: string | null;
};
export type UpdateOneUserInput = { id: string; update: UserUpdateInput; };
I get this mutation: mutation AccountSettingsUpdateUser($id: String, $update: UserUpdateInput!) { registerOrUpdateUser(id: $id, data: $update) { id name email avatar jobTitle phone timezone } } { "input": { "id": "1", "update": { "id": "1", "update": { "name": "alzcorp@gmadsil.com" } } } }
Let me check the knowledge base for you. One moment! :books:
----------------------
I apologize for the confusion. The issue seems to be that the
values object you're passing to the updateMutation function is nested one level too deep.
In your frontend code, you're passing values as {{ id: id, update: {{ name: value }} }}:
But in your GraphQL mutation, the UserUpdateInput type expects an object with name property:
To fix this, you can modify your frontend code to pass values as {{ name: value }}:
In this example, id is the ID of the user you want to update, and value is the new name of the user. You should replace id and value with your actual values.
Please note that this is a simplified example. Depending on your needs, you might need to handle more complex parameters or add additional logic.
Source (https://refine.dev/docs/data/hooks/use-update#mutation-parameters-1)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Why are you making this up?
I am not passing the updateMutation function in a level too deep.
I send it like so:
updateMutation({
resource: "users",
id: id,
values: {
id: id,
update: { name: value }
},
mutationMode: "optimistic", successNotification: false, meta: { gqlMutation: ACCOUNT_SETTINGS_UPDATE_USER_MUTATION, }, }); Please get your facts right
mutationMode: "optimistic", successNotification: false, meta: { gqlMutation: ACCOUNT_SETTINGS_UPDATE_USER_MUTATION, }, }); Please get your facts right
Let me check the knowledge base for you. One moment! :books:
----------------------
I apologize for the confusion earlier. You're right, the
values object you're passing to the updateMutation function is structured correctly according to your GraphQL mutation and types.
The values object should match the UpdateOneUserInput type, which expects an id and an update object. The update object, in turn, should match the UserUpdateInput type, which expects a name property.
Here's how you're calling the updateMutation function:
This looks correct according to your GraphQL mutation and types. The id and values parameters will be mapped to the $id and $update variables in your ACCOUNT_SETTINGS_UPDATE_USER_MUTATION, respectively.
If you're still getting an error, it might be due to how the updateMutation function handles the values object. I would recommend checking the implementation of the updateMutation function and the useUpdate hook to make sure they're compatible with your GraphQL mutation and types.
Source (https://refine.dev/docs/data/hooks/use-update#mutation-parameters-1)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Why do we need 'id' in the useUpdate?
Let me check the knowledge base for you. One moment! :books:
----------------------
The
id parameter in the useUpdate hook is used to determine which record to update. When you call the mutate method returned by useUpdate, you pass an object that includes id, resource, and values as parameters. These parameters will be passed to the update method from the dataProvider as parameters.
Here's an example:
In this example, id: 1 specifies that the product with ID 1 should be updated. The resource: "products" parameter specifies that the update should be made in the "products" resource, and the values object specifies the new values for the product.
Without the id parameter, the dataProvider wouldn't know which record to update.
Source (https://refine.dev/docs/data/hooks/use-update#id-required)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai so how can I modify this in my dataprovider to handle the data as I want?
import { GraphQLClient } from "@refinedev/graphql";
import { createClient } from "graphql-ws";
import graphqlDataProvider, {
liveProvider as graphqlLiveProvider,
} from "@refinedev/nestjs-query";
import { axiosInstance } from "./axios";
const API_URL = "http://localhost:8000/graphql/";
const WS_URL = "ws://localhost:8000/graphql/";
export const client = new GraphQLClient(API_URL, {
fetch: async (url: string, options: any) => {
try {
const response = await axiosInstance.request({
data: options.body,
url,
...options,
});
return { ...response, data: response.data };
} catch (error: any) {
const messages = error?.map((error: any) => error?.message)?.join("");
const code = error?.[0]?.extensions?.code;
return Promise.reject({
message: messages JSON.stringify(error),
statusCode: code 500,
});
}
},
});
export const wsClient = createClient({
url: WS_URL,
connectionParams: () => ({
headers: {
Authorization: Bearer ${localStorage.getItem("access_token")},
},
}),
});
export const dataProvider = graphqlDataProvider(client);
export const liveProvider = graphqlLiveProvider(wsClient);
Let me check the knowledge base for you. One moment! :books:
----------------------
To modify your data provider to handle data as per your requirements, you can create a custom data provider by wrapping the existing
graphqlDataProvider and overriding the methods you need to customize.
Here's an example of how you can create a custom data provider:
In this example, I'm creating a custom data provider that overrides the update method. You can replace the update method with your actual logic.
Please note that this is a simplified example. Depending on your needs, you might need to handle more complex scenarios or add additional logic.
Source (https://refine.dev/docs/data/data-provider#how-can-i-create-a-custom-data-provider)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai I want to create my django strawberry personal backend for the graphql calls.
What is a good way to create the schema?
I noticed for example that there are a lot of filter and sorting that is being done automatically at refine, and I want to create a schema that is compatible with refine.
Let me check the knowledge base for you. One moment! :books:
----------------------
Creating a GraphQL schema that is compatible with Refine involves defining your types and operations (queries, mutations, and subscriptions) according to the needs of your application. Refine provides a lot of flexibility and supports a wide range of GraphQL features, including filtering and sorting.
Here are some general guidelines for creating a compatible schema:
1. Define your types: Each resource in your application should have a corresponding type in your GraphQL schema. For example, if you have a
User resource, you might define a User type like this:
2. Define your queries: You should define a query for each operation that retrieves data from your backend. For example, you might define a users query that retrieves a list of users:
3. Define your mutations: You should define a mutation for each operation that modifies data on your backend. For example, you might define an updateUser mutation that updates a user:
4. Support filtering and sorting: Refine supports filtering and sorting out of the box. To make your schema compatible with these features, you should design your queries to accept filter and sort arguments. For example, you might define a users query that accepts filter and sort arguments:
In this example, UserFilterInput and UserSortInput are input types that define the structure of the filter and sort arguments, respectively.
Please note that these are general guidelines and your actual schema might need to be more complex depending on the needs of your application.
For more information on how to create a GraphQL schema with Django and Strawberry, you can refer to the Strawberry documentation (https://strawberry.rocks/docs/guides/schema-design).
For more information on how Refine works with GraphQL, you can refer to the Refine documentation (https://refine.dev/docs/data/graphql).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai But theres more to it, because for example I tried using useTable with sorters, and I noticed that the sorters have this structure:
sorters: {
initial: [
{
field: "year", // Example sorter
order: "desc",
}
],
},
However during the call itself, the order is being modified to 'order'.
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, you're correct. The
sorters object in the useTable hook does indeed have an initial array that contains objects with field and order properties. This is used to set the initial sorting state for the table.
However, when the useTable hook makes a request to the backend, it transforms the sorters object into a format that's compatible with the backend. This usually involves changing the order property to sort.
Here's an example of how you might define the sorters object:
In this example, the initial sorting state is set to sort by the year field in descending order.
When the useTable hook makes a request to the backend, it might transform this sorters object into something like this:
This transformation is done to ensure that the sorting state is compatible with the backend.
For more information on how the useTable hook handles sorting, you can refer to the Refine documentation (https://refine.dev/docs/data/hooks/use-table#sorting).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai But again, this:
{
sort: [
{
field: "year",
order: "desc",
},
],
}
is being sent like this:
{field: "year", direction: "DESC"}
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, you're correct. The
sorters object is transformed by Refine before it's sent to the backend. The order property is changed to direction, and its value is capitalized. This is done to match the format expected by many GraphQL APIs.
Here's how the transformation works:
This transformation is handled automatically by Refine, so you don't need to worry about it in your frontend code. When you define the sorters object, you should use the order property with lowercase values ("asc" or "desc").
For more information on how Refine handles sorting, you can refer to the Refine documentation (https://refine.dev/docs/data/hooks/use-table#sorting).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai So you're saying there are expected GraphQL APIs. Can you share a documentation with some expected GraphQL APIs so that I can fit my schema properly?
Let me check the knowledge base for you. One moment! :books:
----------------------
Refine doesn't prescribe a specific structure for your GraphQL API, but it does provide some guidelines and examples that can help you design your schema. Here are some resources that might be helpful:
1. Refine's GraphQL Guide: This guide provides an overview of how Refine works with GraphQL, including how to use GraphQL queries and mutations with Refine's data hooks. It also provides examples of how to use the
gql tag to define your queries and mutations. Refine GraphQL Guide (https://refine.dev/docs/guides-concepts/data-fetching#graphql)
2. Refine's GraphQL Data Provider: This is the data provider that Refine uses to interact with your GraphQL API. It provides a set of methods that correspond to different operations (like getList, getOne, create, update, and delete). You can use this as a reference to understand how Refine expects your API to behave. Refine GraphQL Data Provider (https://refine.dev/docs/data/packages/graphql)
3. Refine's Hasura and Nest.js Query Data Providers: These are examples of data providers for specific GraphQL APIs (Hasura and Nest.js Query). They show how to implement a data provider that's compatible with a specific API, which might give you some ideas for your own API. Hasura Data Provider (https://github.com/pankod/refine/tree/next/packages/hasura), Nest.js Query Data Provider (https://github.com/pankod/refine/tree/next/packages/nestjs-query)
4. GraphQL's Official Documentation: This is a comprehensive resource on how to design a GraphQL schema, including how to define types, queries, mutations, and subscriptions. GraphQL Official Documentation (https://graphql.org/learn/schema/)
Remember, the key is to ensure that your GraphQL API can handle the operations that Refine needs to perform (like fetching a list of records, fetching a single record, creating a record, updating a record, and deleting a record). How you implement these operations in your API is up to you.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai So given the changes required for sorting, what changes do I need to make for 'filtering'?
For example I have this:
filters: {
initial: [
{
field: "vin",
operator: "eq",
value: undefined,
},
{
field: "make",
operator: "contains",
value: undefined,
},
],
},
with this queries:
export const VEHICLES_LIST_QUERY = gql
query Vehicles(
$filter: VehicleFilter!
$sorting: [VehicleSort!]!
$paging: OffsetPaging!
) {
vehicles(filter: $filter, sorting: $sorting, paging: $paging) {
totalCount
nodes {
id
vin
make
model
year
driver {
id
name
email
licenseNumber
}
gateway {
id
serialNumber
firmwareVersion
}
}
}
}
;
And this
export type VehicleFilter = {
make?: InputMaybe<Scalars["String"]["input"]>;
vin?: InputMaybe<Scalars["String"]["input"]>;
};
What should I change?Let me check the knowledge base for you. One moment! :books:
----------------------
The
filters object you're using in the useTable hook is structured correctly. It has an initial array that contains objects with field, operator, and value properties. This is used to set the initial filtering state for the table.
However, when the useTable hook makes a request to the backend, it transforms the filters object into a format that's compatible with the backend. This usually involves changing the operator property to match the expected format of your GraphQL API.
In your VehicleFilter type, you have make and vin fields that accept a String input. If your backend expects the eq and contains operators to be represented differently, you'll need to adjust your VehicleFilter type accordingly.
For example, if your backend expects eq and contains to be represented as _eq and _like, you might define your VehicleFilter type like this:
Then, in your filters object, you would use make_like and vin_eq as the field values:
Please note that this is a simplified example and the actual transformation depends on the requirements of your backend. You might need to adjust this example to fit your needs.
For more information on how Refine handles filtering, you can refer to the Refine documentation (https://refine.dev/docs/data/hooks/use-table#filtering).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok so i want to take the refiine-CRM example and create my own.
I want to create graphql with my own database.
How would you recommend creating the schema?
Are there tools that I can use?>
Let me check the knowledge base for you. One moment! :books:
----------------------
Creating a GraphQL schema for your own database involves defining types, queries, mutations, and subscriptions based on your data model. Here are some steps you can follow:
1. Understand your data model: Identify the entities in your database and their relationships. Each entity will correspond to a type in your GraphQL schema.
2. Define your types: For each entity in your database, define a corresponding type in your GraphQL schema. The fields in the type should match the columns in the database table.
3. Define your queries: Define a query for each operation that retrieves data from your database. This typically includes operations to fetch a single record, multiple records, and related records.
4. Define your mutations: Define a mutation for each operation that modifies data in your database. This typically includes operations to create, update, and delete records.
5. Define your subscriptions: If your application needs real-time updates, define subscriptions for the relevant operations.
To create the schema, you can use a variety of tools depending on your tech stack. Here are a few options:
- For JavaScript/TypeScript: You can use libraries like Apollo Server (https://www.apollographql.com/docs/apollo-server/) or TypeGraphQL (https://typegraphql.com/).
- For Python: You can use libraries like Graphene (https://graphene-python.org/) or Strawberry (https://strawberry.rocks/).
- For Ruby: You can use libraries like GraphQL Ruby (https://graphql-ruby.org/).
- For Java: You can use libraries like GraphQL Java (https://www.graphql-java.com/).
- For .NET: You can use libraries like Hot Chocolate (https://chillicream.com/docs/hotchocolate).
To ensure compatibility with Refine, your GraphQL API should support filtering, sorting, and pagination. Refine's GraphQL data provider (https://refine.dev/docs/data/packages/graphql) provides examples of how to structure your queries and mutations to support these features.
Finally, to help you design your schema, you can use tools like GraphQL Editor (https://graphqleditor.com/) or Apollo Studio (https://studio.apollographql.com/). These tools provide a visual interface for designing your schema and can generate schema code for you.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Hi again, I need help with this:
CreateResponse
I have this part of the code:
const { formProps, modalProps, close, onFinish } = useModalForm<
Vehicle,
HttpError,
FormValues
>({
action: "create",
defaultVisible: true,
resource: "vehicles",
redirect: false,
warnWhenUnsavedChanges: !isOverModal,
mutationMode: "pessimistic",
meta: {
gqlMutation: VEHICLES_CREATE_MUTATION,
},
});
...
try {
const yearInt = Number(values.year);
const data = await onFinish({
make: values.make,
model: values.model,
vin: values.vin,
year: yearInt,
drivers: values.drivers,
gateway: values.gateway,
dashcamera: values.dashcamera
});
console.log("Mutation response:", data);
const createdVehicle = (data as CreateResponse<Vehicle>)?.data; console.log(createdVehicle) But for some reason the data I get back is undefined. Even though the call processed succesfully, the data at: const createdVehicle = (data as CreateResponse<Vehicle>)?.data; is undefined. What can be the issue?
const createdVehicle = (data as CreateResponse<Vehicle>)?.data; console.log(createdVehicle) But for some reason the data I get back is undefined. Even though the call processed succesfully, the data at: const createdVehicle = (data as CreateResponse<Vehicle>)?.data; is undefined. What can be the issue?
Let me check the knowledge base for you. One moment! :books:
----------------------
The issue you're experiencing might be due to the response structure of your GraphQL mutation. The
onFinish function from useModalForm returns the data from the mutation, but the structure of this data depends on how your GraphQL mutation is defined.
In your case, it seems like the mutation is successful but the returned data is undefined. This could happen if your mutation doesn't return the created object. In GraphQL, the mutation should return the created object for it to be available in the response.
Here's an example of how a create mutation might look:
In this example, the createVehicle mutation returns the created vehicle object. This object would then be available in the response data.
If your mutation doesn't return the created object, you would need to modify it to do so. If you're not able to modify the mutation, you might need to fetch the created object separately after the mutation is completed.
If you're still having trouble, it might be helpful to check the Refine documentation on mutations (https://refine.dev/docs/guides-concepts/data-fetching#mutations) or the React Query documentation on mutations (https://react-query.tanstack.com/guides/mutations), as Refine uses React Query for data fetching.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok, so I have it as:
export const VEHICLES_CREATE_MUTATION = gql
mutation CreateVehicle($input: VehicleCreateInput!) {
createVehicle(input: $input) {
vehicle {
id
make
model
vin
year
drivers
gateway
dashcamera
}
}
}
;
But seems that
Cannot query field "vehicle" on type "VehicleType".GraphQL: Validation
Originally I had it as:
export const VEHICLES_CREATE_MUTATION = gql
mutation CreateVehicle($input: VehicleCreateInput!) {
createVehicle(input: $input) {
id
make
model
vin
year
}
}
;
And this is where I had the issue.
Here is the backend schema for VehicheCreateInput:
@strawberry.input
class VehicleDataInput:
make: str
model: str
vin: str
year: int
drivers: Optional[List[str]] = None
gateway: Optional[str] = None
dashcamera: Optional[str] = None
@strawberry.input
class VehicleCreateInput:
vehicle: VehicleDataInputLet me check the knowledge base for you. One moment! :books:
----------------------
The issue seems to be with the structure of your GraphQL mutation. In your original mutation, you're directly querying the fields
id, make, model, vin, year after the createVehicle mutation. However, in your updated mutation, you're trying to query a vehicle field which doesn't exist in your schema.
Given your VehicleCreateInput and VehicleDataInput types, your mutation should look like this:
This mutation assumes that your createVehicle mutation returns a Vehicle type that includes the fields id, make, model, vin, year, drivers, gateway, and dashcamera.
If you're still having trouble, you might want to check the definition of your createVehicle mutation in your backend schema. Make sure that it's defined to return a Vehicle type that includes all the fields you're querying.
For more information on how to define mutations in Strawberry, you can refer to the Strawberry documentation (https://strawberry.rocks/docs/guides/mutations). For more information on how to use mutations with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/data-fetching#mutations).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai This is the backend instance:
def create_mutation(model_cls: Type[Model], input_cls: Type, type_cls):
@strawberry.mutation
async def create(info: Info, input: input_cls) -> type_cls:
input_data = getattr(input, list(input.dict.keys())[0]).dict
resolved_data, m2m_relations = await resolve_foreign_keys(model_cls, input_data)
instance = await sync_to_async(model_cls.objects.create)(**resolved_data)
# Set ManyToMany relations if any, assuming IDs are strings
for relation, ids in m2m_relations.items():
manager = getattr(instance, relation)
await sync_to_async(manager.set)(ids)
return instance
return create
So it returns the instance.
Let me check the knowledge base for you. One moment! :books:
----------------------
Given your backend instance, it seems like your
createVehicle mutation is correctly returning the created instance. However, the issue might be with how the returned instance is structured.
In GraphQL, the structure of the returned data needs to match the structure of the query. This means that if your mutation is defined to return a Vehicle type, the returned instance needs to be an object that matches the structure of the Vehicle type.
Here's an example of how a Vehicle type might be defined in GraphQL:
In this example, the Vehicle type has fields id, make, model, vin, year, drivers, gateway, and dashcamera. The returned instance from your createVehicle mutation needs to be an object that includes these fields.
If you're still having trouble, you might want to check the returned instance in your backend code to make sure it includes all the necessary fields. You can do this by adding a print statement or a debugger in your create function:
This will print the instance to the console when the mutation is called, allowing you to see its structure.
For more information on how to define mutations in Strawberry, you can refer to the Strawberry documentation (https://strawberry.rocks/docs/guides/mutations). For more information on how to use mutations with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/data-fetching#mutations).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai So the print instance returns:
ddsd ssss (22)
which is the values I use with the create as:
{'make': 'ddsd', 'model': 'ssss', 'vin': 'aass', 'year': 22, 'drivers': None, 'gateway': None, 'dashcamera': None}
Do I need to modify the returned value?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, it seems like the returned instance from your
createVehicle mutation is not in the expected format. The instance is printed as ddsd ssss (22), but it should be an object that includes all the fields of the Vehicle type.
You can modify the returned instance by converting it to a dictionary before returning it. Here's how you can do it:
In this example, model_to_dict is a Django function that converts a model instance into a dictionary. If you're not using Django, you might need to use a different method to convert the instance to a dictionary.
Please note that the returned dictionary should match the structure of your Vehicle type in your GraphQL schema. This means it should include all the fields of the Vehicle type, and the values should be in the correct format.
For more information on how to define mutations in Strawberry, you can refer to the Strawberry documentation (https://strawberry.rocks/docs/guides/mutations). For more information on how to use mutations with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/data-fetching#mutations).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai So I changed the function to:
def create_mutation(model_cls: Type[Model], input_cls: Type, type_cls):
@strawberry.mutation
async def create(info: Info, input: input_cls) -> type_cls:
input_data = getattr(input, list(input.dict.keys())[0]).dict
resolved_data, m2m_relations = await resolve_foreign_keys(model_cls, input_data)
instance = await sync_to_async(model_cls.objects.create)(**resolved_data)
for relation, ids in m2m_relations.items():
manager = getattr(instance, relation)
await sync_to_async(manager.set)(ids)
print(instance)
instance_dict = await sync_to_async(model_to_dict)(instance)
return instance_dict
return create
But now I get this error:
graphql.error.graphql_error.GraphQLError: Expected value of type 'VehicleType' but got: {'id': 54, 'vin': 'asda2asd', 'make': 'ddsd', 'model': 'ssss', 'year': 22, 'gateway': None, 'dashcamera': None, 'drivers': []}.
Let me check the knowledge base for you. One moment! :books:
----------------------
The error message suggests that the returned dictionary from your mutation doesn't match the expected
VehicleType in your GraphQL schema.
In your Strawberry mutation, you've specified that the return type of the create function is type_cls, which I assume is equivalent to VehicleType in your GraphQL schema. However, the actual returned value is a dictionary, which is not an instance of VehicleType.
To resolve this issue, you need to ensure that the returned value from your mutation is an instance of VehicleType. You can do this by creating a new instance of VehicleType with the values from your dictionary:
In this example, VehicleType is the class that represents the Vehicle type in your GraphQL schema. You'll need to replace VehicleType with the actual class name in your code.
Please note that this solution assumes that VehicleType is a class that can be instantiated with a dictionary of values. If VehicleType is not a class or can't be instantiated in this way, you might need to use a different method to create an instance of VehicleType.
For more information on how to define mutations in Strawberry, you can refer to the Strawberry documentation (https://strawberry.rocks/docs/guides/mutations). For more information on how to use mutations with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/data-fetching#mutations).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok good, so do I now need to change this:
export const VEHICLES_CREATE_MUTATION = gql
mutation CreateVehicle($input: VehicleCreateInput!) {
createVehicle(input: $input) {
id
make
model
vin
year
}
}
;
Or should I keep it as is?
If I keep it as is, I still get 'undefined' for the data.Let me check the knowledge base for you. One moment! :books:
----------------------
Your
VEHICLES_CREATE_MUTATION seems to be correctly structured. It's calling the createVehicle mutation with an input argument of type VehicleCreateInput, and it's querying the fields id, make, model, vin, and year from the returned object.
However, if you're still getting undefined for the data, it might be due to how you're accessing the data in your frontend code. In GraphQL, the returned data is nested under the name of the mutation. So, you should access the data like this:
In this example, data is the result of the onFinish function from useModalForm, and createVehicle is the name of your mutation. This will give you the object that was returned by your createVehicle mutation.
If you're still having trouble, it might be helpful to log the entire data object to see its structure:
This will print the entire response from the mutation, allowing you to see how the data is structured.
For more information on how to use mutations with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/data-fetching#mutations). For more information on how to use mutations with Apollo Client (which is used by Refine under the hood), you can refer to the Apollo Client documentation (https://www.apollographql.com/docs/react/data/mutations/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai So when I print:
console.log("Mutation response:", data);
the result is still:
data
:
undefined
Let me check the knowledge base for you. One moment! :books:
----------------------
If the
data from the mutation response is still undefined, it might be due to a few reasons:
1. The mutation is not returning any data: As discussed earlier, make sure your mutation is structured to return the necessary data. You've already checked this, but it's worth revisiting.
2. The mutation is not successful: If the mutation is not successful, data would be undefined. Check if there are any errors in the mutation response. You can do this by logging the error from the mutation result:
If there's an error, this will print the error message, which can give you more information about what's going wrong.
3. The onFinish function is not being called or awaited: The onFinish function is asynchronous, so you need to make sure you're calling it with await to wait for the mutation to complete. If you're not using await, the function will return immediately, and data will be undefined.
Make sure you're calling onFinish inside an async function. If you're not inside an async function, you can use .then() to wait for the mutation to complete:
If you're still having trouble, it might be helpful to check the Refine documentation on mutations (https://refine.dev/docs/guides-concepts/data-fetching#mutations) or the React Query documentation on mutations (https://react-query.tanstack.com/guides/mutations), as Refine uses React Query for data fetching.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai I tried using:
const { data, error } = await onFinish({ ... });
But I get:
Property 'data' does not exist on type 'void | UpdateResponse<Pick<VehicleType, "id" | "make" | "model" | "vin" | "year">> | CreateResponse<Pick<VehicleType, "id" | "make" | "model" | "vin" | "year">>'.ts(2339)
Here is the mutation:
const { formProps, modalProps, close, onFinish } = useModalForm<
Vehicle,
HttpError,
FormValues
>({
action: "create",
defaultVisible: true,
resource: "vehicles",
redirect: false,
warnWhenUnsavedChanges: !isOverModal,
mutationMode: "pessimistic",
meta: {
gqlMutation: VEHICLES_CREATE_MUTATION,
},
});
Let me check the knowledge base for you. One moment! :books:
----------------------
The error message suggests that TypeScript is not able to find a
data property on the returned value of onFinish. This is because onFinish returns a Promise that resolves to a CreateResponse or UpdateResponse object, not a data object.
The CreateResponse and UpdateResponse objects have a data property, so you can access it like this:
In this example, response is the result of the onFinish function, and data is the data property of the response. This will give you the data from the mutation response.
If there's an error in the mutation, onFinish will throw an error, so you might want to wrap it in a try-catch block to handle errors:
In this example, if there's an error in the mutation, the error will be caught and logged to the console.
For more information on how to use mutations with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/data-fetching#mutations). For more information on how to use mutations with React Query (which is used by Refine under the hood), you can refer to the React Query documentation (https://react-query.tanstack.com/guides/mutations).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai So there is no error.
Why is the data keeps being empty?
Let me check the knowledge base for you. One moment! :books:
----------------------
If there's no error and the mutation is successful, but the data is still
undefined, it might be due to how the mutation result is being handled in your frontend code or how the data is being returned from your backend.
Here are a few things you can check:
1. Check the mutation result in your network tab: Open the network tab in your browser's developer tools and find the request for your mutation. Check the response of this request to see if it includes the expected data. If the data is not included in the response, the issue is likely with your backend.
2. Check the structure of your mutation: In GraphQL, the structure of the returned data needs to match the structure of the mutation. Make sure your mutation is structured to return the necessary data. You've already checked this, but it's worth revisiting.
3. Check how you're accessing the data: In your frontend code, make sure you're accessing the data correctly. The data from a mutation is usually nested under the name of the mutation. So, if your mutation is named createVehicle, you should access the data like this:
In this example, response is the result of the onFinish function, and createVehicle is the name of your mutation.
If you're still having trouble, it might be helpful to provide more information about your backend and frontend code, such as the definition of your createVehicle mutation in your backend and how you're calling the onFinish function in your frontend.
For more information on how to use mutations with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/data-fetching#mutations). For more information on how to use mutations with Apollo Client (which is used by Refine under the hood), you can refer to the Apollo Client documentation (https://www.apollographql.com/docs/react/data/mutations/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai So over on the network tab, this is the mutation:
mutation CreateVehicle($input: VehicleCreateInput!) {
createVehicle(input: $input) {
id
make
model
vin
year
}
}
variables:
{
"input": {
"vehicle": {
"make": "gfdg",
"model": "fgggh",
"vin": "ghgjh",
"year": 654
}
}
}
And this is the response:
{
"data": {
"createVehicle": {
"id": "61",
"make": "gfdg",
"model": "fgggh",
"vin": "ghgjh",
"year": 654
}
}
}
Let me check the knowledge base for you. One moment! :books:
----------------------
Based on the mutation and response you've provided, it seems like your backend is correctly returning the data. The
createVehicle mutation is returning an object with the fields id, make, model, vin, and year, which matches the structure of your mutation.
However, in your frontend code, you might not be accessing the data correctly. The data from a mutation is usually nested under the name of the mutation. So, if your mutation is named createVehicle, you should access the data like this:
In this example, response is the result of the onFinish function, and createVehicle is the name of your mutation. This will give you the object that was returned by your createVehicle mutation.
If you're still having trouble, it might be helpful to provide more information about how you're calling the onFinish function in your frontend.
For more information on how to use mutations with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/data-fetching#mutations). For more information on how to use mutations with Apollo Client (which is used by Refine under the hood), you can refer to the Apollo Client documentation (https://www.apollographql.com/docs/react/data/mutations/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai The response is still undefines, and also when I set:
const data = response?.createVehicle;
I get the error:
Property 'createVehicle' does not exist on type 'UpdateResponse<Pick<VehicleType, "id" | "make" | "model" | "vin" | "year">> | CreateResponse<Pick<VehicleType, "id" | "make" | "model" | "vin" | "year">>'.
Property 'createVehicle' does not exist on type 'UpdateResponse<Pick<VehicleType, "id" | "make" | "model" | "vin" | "year">>'.ts(2339)
Let me check the knowledge base for you. One moment! :books:
----------------------
The error message suggests that TypeScript is not able to find a
createVehicle property on the returned value of onFinish. This is because onFinish returns a Promise that resolves to a CreateResponse or UpdateResponse object, not a data object.
The CreateResponse and UpdateResponse objects have a data property, so you can access it like this:
In this example, response is the result of the onFinish function, and data is the data property of the response. This will give you the data from the mutation response.
If there's an error in the mutation, onFinish will throw an error, so you might want to wrap it in a try-catch block to handle errors:
In this example, if there's an error in the mutation, the error will be caught and logged to the console.
For more information on how to use mutations with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/data-fetching#mutations). For more information on how to use mutations with React Query (which is used by Refine under the hood), you can refer to the React Query documentation (https://react-query.tanstack.com/guides/mutations).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai You are not helping, the issue is that the returned data keeps being empty.
Here is more from the code:
type Vehicle = GetFields<CreateVehicleMutation>;
type Props = {
isOverModal?: boolean;
};
type FormValues = GetVariables<CreateVehicleMutationVariables>
export const VehicleCreatePage = ({ isOverModal }: Props) => {
const getToPath = useGetToPath();
const [searchParams] = useSearchParams();
const { pathname } = useLocation();
const go = useGo();
const { formProps, modalProps, close, onFinish } = useModalForm<
Vehicle,
HttpError,
FormValues
>({
action: "create",
defaultVisible: true,
resource: "vehicles",
redirect: false,
warnWhenUnsavedChanges: !isOverModal,
mutationMode: "pessimistic",
meta: {
gqlMutation: VEHICLES_CREATE_MUTATION,
},
});
with:
export const VEHICLES_CREATE_MUTATION = gql
mutation CreateVehicle($input: VehicleCreateInput!) {
createVehicle(input: $input) {
id
make
model
vin
year
}
}
;
and:
export type CreateVehicleMutation = {
createVehicle: Pick<
Types.VehicleType,
"id" | "make" | "model" | "vin" | "year"
>;
};
export type VehicleType = {
dashcamera?: Maybe<DashcameraType>;
drivers?: Maybe<Array<DriverType>>;
gateway?: Maybe<GatewayType>;
id: Scalars["ID"]["output"];
make: Scalars["String"]["output"];
model: Scalars["String"]["output"];
vin: Scalars["String"]["output"];
year: Scalars["Int"]["output"];
};
export type CreateVehicleMutationVariables = Types.Exact<{
input: Types.VehicleCreateInput;
}>;
export type VehicleCreateInput = {
vehicle: VehicleDataInput;
};
export type VehicleDataInput = {
dashcamera?: InputMaybe<Scalars["String"]["input"]>;
drivers?: InputMaybe<Array<Scalars["String"]["input"]>>;
gateway?: InputMaybe<Scalars["String"]["input"]>;
make: Scalars["String"]["input"];
model: Scalars["String"]["input"];
vin: Scalars["String"]["input"];
year: Scalars["Int"]["input"];
};Let me check the knowledge base for you. One moment! :books:
----------------------
I'm sorry for the confusion earlier. Based on the additional code you've provided, it seems like you're using the
useModalForm hook from Refine correctly. The onFinish function from useModalForm should return the data from the mutation when it's successful.
However, if the data is still undefined, it might be due to how the mutation result is being handled in your frontend code or how the data is being returned from your backend.
Here are a few things you can check:
1. Check the mutation result in your network tab: Open the network tab in your browser's developer tools and find the request for your mutation. Check the response of this request to see if it includes the expected data. If the data is not included in the response, the issue is likely with your backend.
2. Check the structure of your mutation: In GraphQL, the structure of the returned data needs to match the structure of the mutation. Make sure your mutation is structured to return the necessary data. You've already checked this, but it's worth revisiting.
3. Check how you're accessing the data: In your frontend code, make sure you're accessing the data correctly. The data from a mutation is usually nested under the name of the mutation. So, if your mutation is named createVehicle, you should access the data like this:
In this example, response is the result of the onFinish function, and data is the data property of the response. This will give you the data from the mutation response.
If you're still having trouble, it might be helpful to provide more information about your backend and frontend code, such as the definition of your createVehicle mutation in your backend and how you're calling the onFinish function in your frontend.
For more information on how to use mutations with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/data-fetching#mutations). For more information on how to use mutations with Apollo Client (which is used by Refine under the hood), you can refer to the Apollo Client documentation (https://www.apollographql.com/docs/react/data/mutations/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Could the issue be with the data provider?
import { GraphQLClient } from "@refinedev/graphql";
import { createClient } from "graphql-ws";
import graphqlDataProvider, {
liveProvider as graphqlLiveProvider,
} from "@refinedev/nestjs-query";
import { axiosInstance } from "./axios";
export const API_BASE_URL = "http://localhost:8000"
export const API_URL =
return { ...response, data: response.data }; } catch (error: any) { const messages = error?.map((error: any) => error?.message)?.join(""); const code = error?.[0]?.extensions?.code;
return Promise.reject({ message: messages JSON.stringify(error), statusCode: code 500, }); } }, });
export const wsClient = createClient({ url: WS_URL, connectionParams: () => ({ headers: { Authorization:
${API_BASE_URL}/graphql/;
const WS_URL = "ws://localhost:8000/graphql/";
export const client = new GraphQLClient(API_URL, {
fetch: async (url: string, options: any) => {
try {
const response = await axiosInstance.request({
data: options.body,
url,
...options,
});
return { ...response, data: response.data }; } catch (error: any) { const messages = error?.map((error: any) => error?.message)?.join(""); const code = error?.[0]?.extensions?.code;
return Promise.reject({ message: messages JSON.stringify(error), statusCode: code 500, }); } }, });
export const wsClient = createClient({ url: WS_URL, connectionParams: () => ({ headers: { Authorization:
Bearer ${localStorage.getItem("access_token")},
},
}),
});
export const dataProvider = graphqlDataProvider(client);
export const liveProvider = graphqlLiveProvider(wsClient);
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
export const axiosInstance = axios.create({
headers: {
"Content-Type": "application/json, text/plain, /",
"Apollo-Require-Preflight": "true",
},
});
axiosInstance.interceptors.request.use(
async (config) => {
const accessToken = localStorage.getItem("access_token");
if (accessToken && config?.headers) {
config.headers.Authorization = Bearer ${accessToken};
}
return config;
},
(error) => {
return Promise.reject(error);
},
);
axiosInstance.interceptors.response.use(
response => {
console.log("Raw Axios response:", response);
convertAxiosToFetchResponse(response);
return response;
},
error => {
console.log("Axios error response:", error.response);
return Promise.reject(error);
}
);
const convertAxiosToFetchResponse = (response: AxiosResponse) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
response.headers["forEach"] = function (callback: any) {
for (const header in this) {
if (Object.hasOwn(this, header)) {
callback(this[header], header, this);
}
}
};
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
response["text"] = async function () {
return JSON.stringify(this.data);
};
SetResponseOk(response, true);
};
const SetResponseOk = (response: AxiosResponse, ok: boolean) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
response["ok"] = ok;
};Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, the issue could be related to the data provider. The data provider is responsible for communicating with your API and making data available to Refine applications. If the data provider is not correctly set up or if it's not correctly handling the responses from your API, it could cause issues like the one you're experiencing.
Looking at your code, it seems like you're using the
graphqlDataProvider from @refinedev/nestjs-query as your data provider, and you're using axios for making HTTP requests.
Here are a few things you can check:
1. Check your GraphQL client: Make sure your GraphQL client is correctly set up and that it's able to communicate with your API. You can test this by making a simple query to your API and checking if it returns the expected data.
2. Check your axios instance: Make sure your axios instance is correctly set up and that it's able to make HTTP requests. You can test this by making a simple HTTP request to your API and checking if it returns the expected data.
3. Check your data provider: Make sure your data provider is correctly set up and that it's correctly handling the responses from your API. You can test this by making a simple query or mutation using your data provider and checking if it returns the expected data.
4. Check your response interceptor: In your axios response interceptor, you're converting the axios response to a fetch response. Make sure this conversion is correctly done and that it's not causing any issues.
If you're still having trouble, it might be helpful to provide more information about your backend and frontend code, such as the definition of your createVehicle mutation in your backend and how you're calling the onFinish function in your frontend.
For more information on how to use data providers with Refine, you can refer to the Refine documentation (https://refine.dev/docs/data/data-provider). For more information on how to use axios with GraphQL, you can refer to the axios documentation (https://axios-http.com/docs/intro) and the GraphQL documentation (https://graphql.org/learn/serving-over-http/#post-request).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai can I skip the async?
onFinish={(values) => {
try {
const yearInt = Number(values.year);
const response = onFinish({
make: values.make,
model: values.model,
vin: values.vin,
year: yearInt,
drivers: values.drivers,
gateway: values.gateway,
dashcamera: values.dashcamera
});
console.log("Mutation response:", response);
When I do it like so, I get this print:
Mutation response:
Promise {<pending>}
[[Prototype]]
:
Promise
[[PromiseState]]
Let me check the knowledge base for you. One moment! :books:
----------------------
The
onFinish function is asynchronous, which means it returns a Promise. If you want to get the result of the Promise, you need to use the await keyword to wait for the Promise to resolve. If you don't use await, you'll get a pending Promise, which is what you're seeing in your console log.
If you want to skip the async keyword, you can use the then method of the Promise to handle the result:
In this example, then is used to handle the result of the Promise, and catch is used to handle any errors. This is equivalent to using async/await with a try-catch block.
For more information on how to use Promises, you can refer to the MDN documentation on Promises (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai So I noticed I have this:
const { formProps, modalProps, close, onFinish } = useModalForm<
Vehicle,
HttpError,
FormValues
>({
action: "create",
defaultVisible: true,
resource: "vehicles",
redirect: false,
warnWhenUnsavedChanges: !isOverModal,
mutationMode: "pessimistic",
meta: {
gqlMutation: VEHICLES_CREATE_MUTATION,
},
});
And this is Vehicle:
type Vehicle = GetFields<CreateVehicleMutation>;
with:
export type CreateVehicleMutation = {
createVehicle: Pick<
Types.VehicleType,
"id" | "make" | "model" | "vin" | "year"
>;
};
and the VehicleType is:
export type VehicleType = {
dashcamera?: Maybe<DashcameraType>;
drivers?: Maybe<Array<DriverType>>;
gateway?: Maybe<GatewayType>;
id: Scalars["ID"]["output"];
make: Scalars["String"]["output"];
model: Scalars["String"]["output"];
vin: Scalars["String"]["output"];
year: Scalars["Int"]["output"];
};
But the response for the mutation is:
{
"data": {
"createVehicle": {
"id": "66",
"make": "sdfds",
"model": "fdfdf",
"vin": "dfdffdf",
"year": 22
}
}
}
Which is createVehicle.
Now under the Mutation type I have:
export type Mutation = {
createDashcam: DashcameraType;
createDriver: DriverType;
createEvent: EventType;
createGateway: EventType;
createVehicle: VehicleType;
deleteDashcam: DeleteResponse;
deleteDriver: DeleteResponse;
deleteEvent: DeleteResponse;
deleteGateway: DeleteResponse;
deleteVehicle: DeleteResponse;
registerOrUpdateUser: UserType;
updateDashcam: DashcameraType;
updateDriver: DriverType;
updateEvent: EventType;
updateGateway: EventType;
updateVehicle: VehicleType;
};
Does any of this gives you a hint as to why I keep having the issues?
Let me check the knowledge base for you. One moment! :books:
----------------------
Based on the information you've provided, it seems like the issue might be related to how you're defining and using your types in TypeScript.
In your
useModalForm hook, you're specifying Vehicle as the type for the mutation result. Vehicle is defined as GetFields<CreateVehicleMutation>, which is equivalent to the createVehicle field in your CreateVehicleMutation type:
This means that Vehicle is equivalent to this type:
However, in your mutation response, createVehicle is an object that contains the fields id, make, model, vin, and year. This means that the actual type of the mutation result is not Vehicle, but { createVehicle: Vehicle }.
To fix this issue, you can change the type of the mutation result to { createVehicle: Vehicle }:
Then, when you call onFinish, you can access the createVehicle field from the result:
This should give you the data from the createVehicle field in the mutation response.
For more information on how to use TypeScript with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/typescript). For more information on how to use TypeScript with GraphQL, you can refer to the GraphQL Code Generator documentation (https://www.graphql-code-generator.com/docs/getting-started/index).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai I noticed that at a working example there is:
export type CreateCompanyMutation = {
createOneCompany: Pick<Types.Company, "id" | "name"> & {
salesOwner: Pick<Types.User, "id" | "name" | "avatarUrl">;
};
};
Could it be that it requires the call to be of the form
createOneVehicle?
Let me check the knowledge base for you. One moment! :books:
----------------------
The naming of the mutation (
createOneVehicle vs createVehicle) depends on how your GraphQL API is set up. If your API expects the mutation to be named createOneVehicle, then you should use createOneVehicle in your frontend code. If your API expects the mutation to be named createVehicle, then you should use createVehicle.
You can check the schema of your GraphQL API to see what mutations it supports. You can usually do this by sending an introspection query to your API, or by using a tool like GraphQL Playground or GraphiQL.
If your API does support a createOneVehicle mutation, and you want to use it in your Refine application, you would need to update your VEHICLES_CREATE_MUTATION and CreateVehicleMutation to use createOneVehicle instead of createVehicle.
For example:
Then, in your useModalForm hook, you would need to update the type of the mutation result to CreateVehicleMutation:
And when you call onFinish, you would need to access the createOneVehicle field from the result:
This should give you the data from the createOneVehicle field in the mutation response.
For more information on how to use mutations with Refine, you can refer to the Refine documentation (https://refine.dev/docs/guides-concepts/data-fetching#mutations). For more information on how to use mutations with GraphQL, you can refer to the GraphQL documentation (https://graphql.org/learn/queries/#mutations).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok I got it to work now.
How can I make sure now the 'go' function directs me properly?
I have this:
go({
to: searchParams.get("to") ?? pathname,
query: {
VehicleId: createdVehicle.id,
to: undefined,
},
options: {
keepQuery: true,
},
type: "replace",
});
And the vehicleId is the ID (string value) of the vehicle.
And I want to direct to for example:
http://localhost:5173/vehicles/edit/66
how can it be done?
Let me check the knowledge base for you. One moment! :books:
----------------------
The
go function from useGo hook in Refine allows you to navigate to different routes in your application. If you want to navigate to the edit page of a vehicle with a specific ID, you can do so by specifying the resource, action, and id in the to parameter of the go function.
Here's how you can do it:
In this example, resource is set to "vehicles", action is set to "edit", and id is set to createdVehicle.id. This will navigate to the edit page of the vehicle with the ID createdVehicle.id.
For more information on how to use the go function, you can refer to the Refine documentation (https://refine.dev/docs/routing/hooks/use-go).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------flat-fuchsiaOP•9mo ago
@kapa.ai Can you explain to me how to get this type with codegen:
export type ContactShowQuery = {
contact: Pick<
Types.Contact,
| "id"
| "name"
| "email"
| "status"
| "jobTitle"
| "phone"
| "timezone"
| "avatarUrl"
| "createdAt"
& {company: Pick<Types.Company, "id" | "name" | "avatarUrl">; salesOwner: Pick<Types.User, "id" | "name" | "avatarUrl">; }; }; I have this function on my backend: @strawberry.field async def driver_by_id(self, info: Info, id: str) -> Optional[DriverType]: try: driver_id = int(id) driver = await sync_to_async(Driver.objects.get)(id=driver_id) return driver except Driver.DoesNotExist: return None but this is what I get: export type DriverShowQuery = { driverById?: Types.Maybe< Pick< Types.DriverType, "id" | "name" | "email" | "licenseNumber" | "phoneNumber" | "joined" > >; };
Let me check the knowledge base for you. One moment! :books:
----------------------
The types generated by GraphQL Code Generator are based on your GraphQL schema. If you want to generate a type similar to
ContactShowQuery, you need to have a similar structure in your GraphQL schema.
In your case, the driver_by_id field in your schema returns a DriverType object, which is why the generated type DriverShowQuery has a driverById field of type DriverType.
If you want to include additional fields in your DriverType object (similar to the company and salesOwner fields in Contact), you need to add these fields to your DriverType in your GraphQL schema.
For example, if a Driver is associated with a Company and a User (as a sales owner), you might define your DriverType like this:
Then, in your driver_by_id resolver, you would return a DriverType object that includes the associated Company and User:
After updating your GraphQL schema and resolvers, you can run GraphQL Code Generator again to generate the updated types.
For more information on how to use GraphQL Code Generator with TypeScript, you can refer to the GraphQL Code Generator documentation (https://www.graphql-code-generator.com/docs/getting-started/index). For more information on how to define types and resolvers in Strawberry, you can refer to the Strawberry documentation (https://strawberry.rocks/docs/guides/schema-design).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsiaOP•9mo ago
@kapa.ai Ok I now need help with the mutation update:
def update_mutation(model_cls: Type[Model], input_cls: Type, type_cls):
@strawberry.mutation
async def update(info: Info, input: input_cls) -> type_cls:
id = input.id
input_data = input.update.dict
# Fetch the instance to be updated
instance = await sync_to_async(model_cls.objects.get)(id=id)
print("instance: ", instance)
instance_dict = await sync_to_async(model_to_dict)(instance)
print(instance_dict)
# Resolve foreign keys and prepare data
resolved_data, m2m_relations = await resolve_foreign_keys(model_cls, input_data)
print(resolved_data, m2m_relations)
# Determine many-to-many fields dynamically
m2m_fields = {f.name for f in model_cls._meta.get_fields() if isinstance(f, models.ManyToManyField)}
scalar_updates = {k: v for k, v in resolved_data.items() if k not in m2m_fields}
for key, value in scalar_updates.items():
setattr(instance, key, value)
await sync_to_async(instance.save)()
# Handle many-to-many updates dynamically for field_name in m2m_fields: if field_name in input_data and input_data[field_name] is not None: ids = input_data[field_name] related_objects = await sync_to_async(model_cls._meta.get_field(field_name).related_model.objects.filter)(idin=ids) related_manager = getattr(instance, field_name) await sync_to_async(related_manager.set)(related_objects) # Convert the instance to the type expected by the GraphQL schema instance_dict = await sync_to_async(model_to_dict)(instance, exclude=m2m_fields) print(instance_dict) for field_name in m2m_fields: instance_dict[field_name] = [obj.id for obj in getattr(instance, field_name).all()]
instance_f = type_cls(**instance_dict) return instance_f return update update_one_driver = update_mutation(Driver, UpdateOneDriverInput, DriverType) for these classes: @strawberry.input class DriverCreateInput: name: str license_number: str email: str phone_number: str joined: datetime @strawberry.input class DriverUpdateInput: name: Optional[str] = None license_number: Optional[str] = None email: Optional[str] = None phone_number: Optional[str] = None vehicles: Optional[List[str]] = None @strawberry.input class CreateOneDriverInput: driver: DriverCreateInput
@strawberry.input class UpdateOneDriverInput: id: str update: DriverUpdateInput @strawberry.django.type(model=Driver) class DriverType: id: auto name: auto license_number: auto email: auto phone_number: auto joined: auto job: Optional[JobType] vehicles: Optional['VehicleType'] And this model: class Driver(models.Model): name = models.CharField(max_length=200) license_number = models.CharField(max_length=20, unique=True) email = models.EmailField() phone_number = models.CharField(max_length=15, blank=True, null=True) joined = models.DateTimeField(auto_now_add=True) job = models.ForeignKey(Job, on_delete=models.SET_NULL, null=True, blank=True)
def str(self): return f"{self.name} - {self.license_number}" The issue is that the expected return type is DriverType, but the model_to_dict from django doesn't return non-editable fields so I keep getting the error "message": "DriverType.init__() missing 2 required keyword-only arguments: 'joined' and 'vehicles'", For this line: instance_f = type_cls(**instance_dict)
# Handle many-to-many updates dynamically for field_name in m2m_fields: if field_name in input_data and input_data[field_name] is not None: ids = input_data[field_name] related_objects = await sync_to_async(model_cls._meta.get_field(field_name).related_model.objects.filter)(idin=ids) related_manager = getattr(instance, field_name) await sync_to_async(related_manager.set)(related_objects) # Convert the instance to the type expected by the GraphQL schema instance_dict = await sync_to_async(model_to_dict)(instance, exclude=m2m_fields) print(instance_dict) for field_name in m2m_fields: instance_dict[field_name] = [obj.id for obj in getattr(instance, field_name).all()]
instance_f = type_cls(**instance_dict) return instance_f return update update_one_driver = update_mutation(Driver, UpdateOneDriverInput, DriverType) for these classes: @strawberry.input class DriverCreateInput: name: str license_number: str email: str phone_number: str joined: datetime @strawberry.input class DriverUpdateInput: name: Optional[str] = None license_number: Optional[str] = None email: Optional[str] = None phone_number: Optional[str] = None vehicles: Optional[List[str]] = None @strawberry.input class CreateOneDriverInput: driver: DriverCreateInput
@strawberry.input class UpdateOneDriverInput: id: str update: DriverUpdateInput @strawberry.django.type(model=Driver) class DriverType: id: auto name: auto license_number: auto email: auto phone_number: auto joined: auto job: Optional[JobType] vehicles: Optional['VehicleType'] And this model: class Driver(models.Model): name = models.CharField(max_length=200) license_number = models.CharField(max_length=20, unique=True) email = models.EmailField() phone_number = models.CharField(max_length=15, blank=True, null=True) joined = models.DateTimeField(auto_now_add=True) job = models.ForeignKey(Job, on_delete=models.SET_NULL, null=True, blank=True)
def str(self): return f"{self.name} - {self.license_number}" The issue is that the expected return type is DriverType, but the model_to_dict from django doesn't return non-editable fields so I keep getting the error "message": "DriverType.init__() missing 2 required keyword-only arguments: 'joined' and 'vehicles'", For this line: instance_f = type_cls(**instance_dict)
Let me check the knowledge base for you. One moment! :books:
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?
flat-fuchsiaOP•9mo ago
@kapa.ai I have this code:
import { FC, useMemo } from "react";
import { useParams } from "react-router-dom";
import {
FilterDropdown,
SaveButton,
ShowButton,
useTable,
} from "@refinedev/antd";
import { HttpError, useCreateMany, useOne, useShow } from "@refinedev/core";
import { GetFields, GetFieldsFromList } from "@refinedev/nestjs-query";
import {
DeleteOutlined,
ExportOutlined,
MailOutlined,
PhoneOutlined,
PlusCircleOutlined,
SearchOutlined,
TeamOutlined,
UserOutlined,
} from "@ant-design/icons";
import {
Button,
Card,
Col,
Form,
Input,
Row,
Select,
Space,
Table,
} from "antd";
import { CustomAvatar, Text } from "@/components";
import { DriverCreateInput, VehicleType } from "@/graphql/schema.types";
import {
VehicleDriverGetVehicleQueryVariables,
VehicleDriverTableQuery,
} from "@/graphql/types";
import {
VEHICLE_INFO_QUERY,
} from "./queries";
export const VehicleDriversTable: FC = () => {
const params = useParams();
const { queryResult } = useShow<VehicleType>({
resource: "vehicles",
id: params?.id,
meta: {
gqlQuery: VEHICLE_INFOQUERY,
},
});
const { data, isLoading, isError } = queryResult;
return (
<Card
headStyle={{
borderBottom: "1px solid #D9D9D9",
marginBottom: "1px",
}}
bodyStyle={{ padding: 0 }}
title={
<Space size="middle">
<TeamOutlined />
<Text>Drivers</Text>
</Space>
}
extra={
<>
<Text className="tertiary">Total drivers: </Text>
<Text strong>
"asd"
</Text>
</>
}
>
<Table
{...data?.data}
rowKey="id"
>
<Table.Column<VehicleType>
title="VIN"
dataIndex="vin"
render={(, record) => {
return (
<Space>
<CustomAvatar name={record.vin} src={null} />
<Text
style={{
whiteSpace: "nowrap",
}}
>
{record.vin}
</Text>
</Space>
);
}}
filterIcon={<SearchOutlined />}
filterDropdown={(props) => (
<FilterDropdown {...props}>
<Input placeholder="Search Name" />
</FilterDropdown>
)}
/>
<Table.Column
title="Title"
dataIndex="jobTitle"
filterIcon={<SearchOutlined />}
filterDropdown={(props) => (
<FilterDropdown {...props}>
<Input placeholder="Search Title" />
</FilterDropdown>
)}
/>
<Table.Column<VehicleType>
dataIndex="id"
width={112}
render={(value, record) => {
return (
<Space>
<Button
size="small"
href={
mailto:${record.make}}
icon={<MailOutlined />}
/>
<Button
size="small"
href={tel:${record.model}}
icon={<PhoneOutlined />}
/>
<ShowButton
hideText
recordItemId={value}
size="small"
resource="drivers"
icon={<ExportOutlined />}
/>
</Space>
);
}}
/>
</Table>
</Card>
);
};
And I ahve an issue that the table isn't using the useShow properlyLet me check the knowledge base for you. One moment! :books:
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?