rare-sapphire•12mo ago

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>
    </>
  );

...

8 Replies

kapa.ai•12mo 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:

rare-sapphire•12mo 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•12mo 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•12mo ago

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

rare-sapphire•12mo 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•12mo 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•12mo ago

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

rare-sapphire•12mo 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>
...