Connect Rest api (Express) with simple-rest list based on the company id to get all job-offers
Hi im relatively new to refine. I made a Rest api endpoint using express to get alle the job-offers a company has published based on its id. When i am using postman everything works fine and i get an array of the needed joboffers: http://localhost:3000/job-offers?companyId=VtCInkBuMHuza8GYOS0z
When i want to get the objects to my refine app i dont get anything:
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL_SERVER)}
resources={[{
name: "Jobs",
list:
/job-offers?companyId=${DEMO_COMPANY_ID},
show: "/job-offers/show/:id",
create: "/job-offers/create",
edit: "/job-offers/edit/:id",
meta: {
canDelete: true,},}]}
notificationProvider={useNotificationProvider}
options={{
syncWithLocation: true,
warnWhenUnsavedChanges: true,
}}>
This is my api endpoint:
app.get('/job-offers', async (req, res) => {
const companyId = req.query.companyId;
if (!companyId) {
res.status(422).json({ error: 'Unprocessable Entity: companyId is required' });
return;
}
const page = parseInt(req.query.page) 1;
const pageSize = parseInt(req.query.pageSize) 10;
const filterJobTitle = req.query.filterJobTitle || null;
try {
// Hier könnte eine Funktion für die Filterung implementiert werden, abhängig von Ihren Anforderungen
const jobOffers = await getCompanyOffers(companyId, page, pageSize, filterJobTitle);
if (jobOffers == null) {
res.status(422).send('Unprocessable Entity: jobOffers is null');
return;
}
res.status(200).json({
data: jobOffers,
meta: {
total: page * pageSize + 1,
page: page,
pageSize: pageSize,
},
});
} catch (error) {
console.log("Error while searching for company offers: " + error);
res.status(500).json({ error: 'Internal Server Error while searching for job offers' });
}
});32 Replies
Hi @Jona. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the extracts, it seems like you're trying to use the
simple-rest data provider to fetch data from your custom Express API. The simple-rest data provider is designed to work with REST APIs that follow a standard design.
In your case, you're trying to fetch a list of job offers for a specific company. The getList method of the simple-rest data provider expects the URL to be in the format apiUrl/resource, with optional query parameters for pagination, sorting, and filtering.
However, your API endpoint is structured differently, with the company ID being passed as a query parameter. This might be the reason why you're not getting any data in your Refine app.
Here's how the simple-rest data provider expects the URLs to be structured:
| Method | URL | Query Parameters | Body |
| --- | --- | --- | --- |
| getList | apiUrl / resource | pagination, sorters, filters | |
You might need to adjust your API endpoint to match this structure, or create a custom data provider that can handle your specific API design.
For more information on how to use the simple-rest data provider, you can refer to the Refine documentation (https://refine.dev/docs/data/packages/simple-rest). If you need to create a custom data provider, you can refer to the Data Fetching guide (https://refine.dev/docs/guides-concepts/data-fetching#multiple-data-providers) in the Refine documentation.
Please note that the code you provided is not included in the information extracts, so I can't provide specific advice on how to adjust it.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@313691710049878026> kapa.ai is still learning and improving, please let us know how it did by reacting below
eastern-cyan•7mo ago
@kapa.ai Is wrote my own data provider:
export const dataProvider = (url: string, id: string): DataProvider => ({
getList: async ({resource}) => {
const response = await fetch(
${url}/${resource}?companyId=${id});
const data = await response.json();
return {
data: data,
total: data.length,
};
},
is it capable on fetching my data now?Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, your custom data provider should be able to fetch data from your API now. You've correctly implemented the
getList method to fetch data from a specific URL and pass the companyId as a query parameter.
Here's your code for reference:
This data provider will send a GET request to the URL ${url}/${resource}?companyId=${id} when the getList method is called. The resource parameter will be provided by Refine based on the resource you're trying to fetch data for.
Please note that this data provider only implements the getList method. If you need to support other operations like getOne, create, update, or delete, you'll need to implement those methods as well.
For more information on creating custom data providers, you can refer to the Refine documentation (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:
----------------------<@313691710049878026> kapa.ai is still learning and improving, please let us know how it did by reacting below
eastern-cyan•7mo ago
@kapa.ai When fetching i get this error: "ERROR":{1 item
"message":"src property must be a valid json object"
}
Is my jobList not correctly formatted?
Document data: {
date: Timestamp { _seconds: 1699427469, _nanoseconds: 372000000 },
websiteLink: '0',
locationName: 'Dortmund',
jobTitle: 'Sekretärin',
salaryMax: '2500',
tags: [ 0 ],
location: GeoPoint { _latitude: 51.5136, _longitude: 7.4653 },
salaryMin: '2000',
jobOption: 'job',
companyID: 'VtCInkBuMHuza8GYOS0z',
jobID: 'TPU2W4IcFfrgOhqknCsS',
demand: 'Kommunikation ist das A und O bei uns vorallem in dieser Position. Außerdem wird dich im Vorstellungsgespräch ein Tipp Test erwarten, denn bei uns muss die Tastatur glühen!',
longDescription: 'Wir sind eine Arztpraxis die unbedingt nach einer Sekretärin',
offer: 'Wir bieten angenehme Arbeitszeiten und soviel Kaffee wie du brauchst',
picture: [
'https://www.benefit-bueroservice.com/wp-content/uploads/2019/01/design-ohne-titel-41.jpg',
'https://wema-raumkonzepte.de/wp-content/uploads/2021/03/Buero-einrichten.jpg'
]
}
admin
WEMA
Home - WEMA
Wir sehen uns als Teil Ihres Teams bzw. einer langfristigen und partnerschaftlichen Zusammenarbeit. Gemeinsam mit Ihnen und Ihren Mitarbeitern schaffen wir
Let me check the knowledge base for you. One moment! :books:
----------------------
Based on the error message you provided, it seems like there's an issue with the format of the data you're trying to fetch. The error message suggests that the
src property must be a valid JSON object, but it's not clear from the information provided what the src property is or where it's coming from.
The job list data you provided appears to be correctly formatted as a JSON object. However, without more context, it's hard to say exactly what's causing the error.
Here are a few things you could check:
1. Make sure the data you're fetching from the API is correctly formatted as a JSON object. You can use a tool like JSON Formatter (https://jsonformatter.curiousconcept.com/) to validate your JSON data.
2. Check the code where you're fetching the data and handling the response. Make sure you're correctly parsing the response data as JSON.
3. If you're using a custom data provider, make sure it's correctly implemented and can handle the data format returned by your API.
For more information on data fetching in Refine, you can refer to the Data Fetching guide (https://refine.dev/docs/guides-concepts/data-fetching) in the Refine documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@313691710049878026> kapa.ai is still learning and improving, please let us know how it did by reacting below
eastern-cyan•7mo ago
@kapa.ai The json formatter says its correctly formatted. You said the dataProvider is also correct.
Here is the api sending the data:
res.status(200).json({
data: jobOffers,
meta: {
total: page * pageSize + 1,
page: page,
pageSize: pageSize,
},
});
and here the dataprovider again:
getList: async ({resource}) => {
const response = await fetch(
${url}/${resource}?companyId=${id});
const data = await response.json();
return {
data: data,
total: data.length,
};
},
and im using it like this:
dataProvider={dataProvider(API_URL_SERVER, DEMO_COMPANY_ID)}
resources={[
{
name: "Jobs",
list: /job-offers, // Die Route für die Job-Liste
show: "/job-offers/show/:id", // Die Route für die Job-Anzeige mit ID-Parameter
create: "/job-offers/create", // Die Route für die Erstellung eines neuen Jobs
edit: "/job-offers/edit/:id", // Die Route für die Bearbeitung eines Jobs mit ID-Parameter
meta: {
canDelete: true,
},
}
]}Let me check the knowledge base for you. One moment! :books:
----------------------
Based on the information provided, your API endpoint, data provider, and usage in the Refine component all seem to be correctly implemented.
However, the error message you're seeing suggests that there might be an issue with the format of the data you're trying to fetch. The error message "src property must be a valid json object" is not a standard JavaScript or HTTP error message, which suggests that it might be coming from somewhere else in your code.
Here are a few things you could check:
1. Make sure the
jobOffers data returned by your API is correctly formatted as an array of JSON objects. The getList method in your data provider is expecting an array, as indicated by the data.length property in the return statement.
2. Check the rest of your code for any references to a src property. The error message suggests that this property must be a valid JSON object, so there might be an issue with how this property is being used or assigned.
3. Try logging the data variable in your data provider to see what data is actually being returned by your API. You can do this by adding a console.log(data) statement right after the const data = await response.json(); line in your data provider.
If you're still having issues, you might want to consider asking for help on the Refine community forum (https://community.refine.dev/) or GitHub discussions (https://github.com/pankod/refine/discussions). The community might be able to provide more specific help based on their experience with similar issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@313691710049878026> kapa.ai is still learning and improving, please let us know how it did by reacting below
eastern-cyan•7mo ago
@kapa.ai The console log in the data provider isnt even printed out, what could cuase this issue?
Let me check the knowledge base for you. One moment! :books:
----------------------
If the
console.log statement in your data provider isn't being executed, it could mean that the getList method isn't being called. This could happen if the resource you're trying to fetch data for doesn't match the name property of the resource object in your Refine component.
Here are a few things you could check:
1. Make sure the name property of the resource object in your Refine component matches the resource you're trying to fetch data for. In your case, the name property is set to "Jobs", so the getList method should be called when you try to fetch data for the "Jobs" resource.
2. Check the rest of your code to make sure you're correctly using the data provider. If you're using the useList hook or the <List> component to fetch data, make sure you're passing the correct resource prop.
3. Try adding a console.log statement at the beginning of the getList method to see if it's being called at all. If it's not, there might be an issue with how you're using the data provider in your code.
If you're still having issues, you might want to consider asking for help on the Refine community forum (https://community.refine.dev/) or GitHub discussions (https://github.com/pankod/refine/discussions). The community might be able to provide more specific help based on their experience with similar issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@313691710049878026> kapa.ai is still learning and improving, please let us know how it did by reacting below
eastern-cyan•7mo ago
@kapa.ai No its not even used/called at all, where could the problem be?