TypeError: rawData.some is not a function

Heya everyone. I am running into an error that I've been trying to figure out for a few hours at this point. I keep getting the following error when I go to my http://localhost:3000/companies page. TypeError: rawData.some is not a function In my _app.tsx I have:
...
const API_URL = "https://api.example.com";

const httpClient = axios.create({
auth: {
username: "username",
password: "password",
}
});

httpClient.interceptors.response.use(
(response) => {
console.log(response)
return response;
},
(error) => {
const customError: HttpError = {
...error,
message: error.response?.data?.message,
statusCode: error.response?.status,
};

return Promise.reject(customError);
},
);
...
return (
<>
<RefineKbarProvider>
<ColorModeContextProvider>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL, httpClient)}
notificationProvider={notificationProvider}
authProvider={authProvider}
resources={[
{
name: "companies",
list: "/companies",
create: "/companies/create",
edit: "/companies/edit/:id",
show: "/companies/show/:id",
meta: {
canDelete: true,
},
},
]}
options={{
syncWithLocation: true,
warnWhenUnsavedChanges: true,
}}
>
{props.children}
<RefineKbar />
<UnsavedChangesNotifier />
</Refine>
</ColorModeContextProvider>
</RefineKbarProvider>
</>
);

...
...
const API_URL = "https://api.example.com";

const httpClient = axios.create({
auth: {
username: "username",
password: "password",
}
});

httpClient.interceptors.response.use(
(response) => {
console.log(response)
return response;
},
(error) => {
const customError: HttpError = {
...error,
message: error.response?.data?.message,
statusCode: error.response?.status,
};

return Promise.reject(customError);
},
);
...
return (
<>
<RefineKbarProvider>
<ColorModeContextProvider>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL, httpClient)}
notificationProvider={notificationProvider}
authProvider={authProvider}
resources={[
{
name: "companies",
list: "/companies",
create: "/companies/create",
edit: "/companies/edit/:id",
show: "/companies/show/:id",
meta: {
canDelete: true,
},
},
]}
options={{
syncWithLocation: true,
warnWhenUnsavedChanges: true,
}}
>
{props.children}
<RefineKbar />
<UnsavedChangesNotifier />
</Refine>
</ColorModeContextProvider>
</RefineKbarProvider>
</>
);

...
kapa.ai
kapa.ai281d ago
Hi @itsjamesmurray. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
rising-crimson
rising-crimson281d ago
Then on my ./companies/index.tsx I have:
...
interface ICompany {
id: number;
name: string;
}

export default function CompanyList() {
const { tableProps } = useTable<ICompany, HttpError>();

return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
</Table>
</List>
);

};
...
interface ICompany {
id: number;
name: string;
}

export default function CompanyList() {
const { tableProps } = useTable<ICompany, HttpError>();

return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
</Table>
</List>
);

};
kapa.ai
kapa.ai281d ago
---------------------- Hmm, I don't know enough to give you a confident answer yet. The error message TypeError: rawData.some is not a function suggests that the rawData object you're trying to use the some method on is not an array. The some method is an array method in JavaScript, and it won't work on non-array objects. However, without more context or code, it's hard to pinpoint the exact issue. The code you've provided doesn't seem to directly relate to the error message you're seeing. It would be helpful to see the part of your code where rawData.some is being called. In the meantime, you might find it helpful to review the Refine documentation (https://refine.dev/docs) or the Refine blog (https://refine.dev/blog) for more information on how to properly set up and use Refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai281d ago
<@845761203640205402> kapa.ai is still learning and improving, please let us know how it did by reacting below
rising-crimson
rising-crimson281d ago
Confirmed that the api is sending data as expected:
Object { data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }

config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }

data: Object { count: 28, next: null, previous: null, … }
​​
count: 28
​​
next: null
​​
previous: null
​​
results: Array(28) [ {…}, {…}, {…}, … ]
​​​
0: Object { id: 1, name: "Test Company", company_type: "Client", … }
​​​
1: Object { id: 2, name: "Company 2", company_type: "na", … }
​​​...
​​​
length: 28
​​​
<prototype>: Array []
​​
<prototype>: Object { … }

headers: Object { "content-length": "8511", "content-type": "application/json" }

request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

status: 200

statusText: "OK"

<prototype>: Object { … }
Object { data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }

config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }

data: Object { count: 28, next: null, previous: null, … }
​​
count: 28
​​
next: null
​​
previous: null
​​
results: Array(28) [ {…}, {…}, {…}, … ]
​​​
0: Object { id: 1, name: "Test Company", company_type: "Client", … }
​​​
1: Object { id: 2, name: "Company 2", company_type: "na", … }
​​​...
​​​
length: 28
​​​
<prototype>: Array []
​​
<prototype>: Object { … }

headers: Object { "content-length": "8511", "content-type": "application/json" }

request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

status: 200

statusText: "OK"

<prototype>: Object { … }
And when using the AntdInferencer:
import { AntdListInferencer } from "@refinedev/inferencer/antd";
import { GetServerSideProps } from "next";

import { getServerSession } from "next-auth";
import { authOptions } from "../api/auth/[...nextauth]";

export default function CompanyList() {
return <AntdListInferencer />;
}

export const getServerSideProps: GetServerSideProps<{}> = async (context) => {
const session = await getServerSession(context.req, context.res, authOptions);

if (!session) {
return {
props: {},
redirect: {
destination: `/login?to=${encodeURIComponent("/companies")}`,
permanent: false,
},
};
}

return {
props: {},
};
};
import { AntdListInferencer } from "@refinedev/inferencer/antd";
import { GetServerSideProps } from "next";

import { getServerSession } from "next-auth";
import { authOptions } from "../api/auth/[...nextauth]";

export default function CompanyList() {
return <AntdListInferencer />;
}

export const getServerSideProps: GetServerSideProps<{}> = async (context) => {
const session = await getServerSession(context.req, context.res, authOptions);

if (!session) {
return {
props: {},
redirect: {
destination: `/login?to=${encodeURIComponent("/companies")}`,
permanent: false,
},
};
}

return {
props: {},
};
};
I am getting:
Unhandled Runtime Error

TypeError: N.map is not a function
Unhandled Runtime Error

TypeError: N.map is not a function
And just to ease my concerns around the API connection, ./companies/show and /companies/edit/[id] work as intended @kapa.ai any reasons why it would work in /edit and /show but my list wont work?
kapa.ai
kapa.ai281d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided in the extracts, it's hard to provide a definitive answer. However, the issue might be related to how the data is being fetched or structured for your list page compared to your edit and show pages. In Refine, the list page typically involves fetching and displaying a list of records, while the edit and show pages usually deal with a single record. If your API endpoint for fetching the list of companies is returning data in a format that's not an array, it could cause issues when Refine tries to process the data for the list page. It's also worth noting that the useTable hook is used for fetching data and managing the table state on the list page. If there's an issue with how this hook is being used, it could potentially cause problems on your list page. For more information, you might want to check out the Refine documentation on adding CRUD pages (https://refine.dev/docs/tutorial/adding-crud-pages/headless/index) and the Refine documentation on the useTable hook (https://refine.dev/docs/packages/documentation/react-table/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai281d ago
<@845761203640205402> kapa.ai is still learning and improving, please let us know how it did by reacting below
rising-crimson
rising-crimson280d ago
SOLVED Had to change the function a bit after some trial and error:
...
export default function CompanyList() {
const { tableProps } = useTable<ICompany, HttpError>();

return (
<List>
<Table dataSource={...tableProps.dataSource?.results} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
...
</Table>
</List>
...
...
export default function CompanyList() {
const { tableProps } = useTable<ICompany, HttpError>();

return (
<List>
<Table dataSource={...tableProps.dataSource?.results} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
...
</Table>
</List>
...
More Posts
Refine pricingHi Refine team ! Do you provide a plan for startup ? We're working on our client dashboard and we wcreate page styleIam using Create component from refinedev/mui. I want to style the form to take full height it seemsChange logo and title in Index.html not working properlyHello everyone Like react i have changes the title and meta faviicon but only the faviicon seems toOpen other resource in new tabis there any hooks or component to embed a text to open a new tab to another show resourceSimple read-only static JSON data providerI looked through the examples, but I'm not able to find any example which just consumes a read-only unsaved changes warning in custom componentaside Mui components I have another plugins in my form so I need to show this warning if i leave chauseModalForm 3.x.x add a value before serverconst { modalProps: createModalProps, formProps: createFormProps, show: createModalShow,warn when unsaved changesin my create/edit forms Iam using useForm({ warnWhenUnsavedChanges: true, }); but it does not Realtime chat socket.ioHello everyone, this is a question, I am doing a chat on react socket-client, nodejs express mongoosCasbin's newEnforcer crash the appI'm trying to configure a RBAC using Casbin following the Doc. Creating the AccessControlProvider, No reflecting the change in title from index.html in refineNo treflecting the change in title from index.html in refinesocketHello, I have a question I am trying to integrate socket.io for live-provider. I have an order lisAdd fields in Edit view@kapa.ai , i want to add keyMembers field in this code and data format for keyMembers is like this, edit form submitI have a useEffect in my Autocomplete component useEffect(() => { if ( initialReturnValuAutocomplete initial renderI previously asked you a problem which was, I want to modify only the data refine fills when Edit paantd table without useTablehow do i set the view elements per page on an antd TableAutocomplete return idIam using a lot of Autocomplete component in the form I made a custom component for that and reusingcustom document header to remove "| refine"custom document header to remove "| refine"Edit page initial loadwhen an edit page loads, it fetches and fills the fields the data from response by looking the name edit page submitIn Edit page, when I submit the data, the value of every field in the form is passing but I only wan