inland-turquoise•3mo ago

useList data is undefined, but graphql query returns correct data

Hello, my useList hook does not work as expected but it also isnt throwing any errors. Here is my useList implementation:

  const { data, isLoading: projectsLoading, isFetched } = useList({
    resource: "projects",
    meta: {
      gqlQuery: getProjects
    }
  })

  console.log(data, isFetched);

  const { data, isLoading: projectsLoading, isFetched } = useList({
    resource: "projects",
    meta: {
      gqlQuery: getProjects
    }
  })

  console.log(data, isFetched);

Here is the console log

{data: undefined, total: undefined} true

{data: undefined, total: undefined} true

the GraphQL query getProejcts:

export const getProjects = gql`
    query Projects {
        projects {
            name
            id
            created_date
        }
    }
`

export const getProjects = gql`
    query Projects {
        projects {
            name
            id
            created_date
        }
    }
`

The response from the server:

{
    "data": {
        "projects": [
            {
                "name": "Test Project",
                "id": "1",
                "created_date": "2024-12-22T21:25:20.389Z"
            }
        ]
    }
}

{
    "data": {
        "projects": [
            {
                "name": "Test Project",
                "id": "1",
                "created_date": "2024-12-22T21:25:20.389Z"
            }
        ]
    }
}

my resources.tsx

    {
        name: "Projects",
        list: "/projects",
        create: "/projects/new",
        edit: "/projects/edit/:id",
        meta: {
            label: "Projects",
            icon: <SettingOutlined />
        }
    }

    {
        name: "Projects",
        list: "/projects",
        create: "/projects/new",
        edit: "/projects/edit/:id",
        meta: {
            label: "Projects",
            icon: <SettingOutlined />
        }
    }

3 Replies

kapa.ai•3mo ago

Hi @baitman. 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 your question and the knowledge sources available, it appears that the issue you're experiencing is related to how the GraphQL data is being handled by the useList hook in refine. Let's analyze the problem and provide a solution. The main issue seems to be that the useList hook is not correctly parsing the GraphQL response. This is likely because the @refinedev/core package expects a specific structure for GraphQL responses when using the useList hook. To resolve this issue, you need to modify your GraphQL query to match the expected structure. Here's how you can do it: 1. Update your GraphQL query:

export const getProjects = gql`
  query Projects($paging: OffsetPaging!) {
    projects(paging: $paging) {
      nodes {
        name
        id
        created_date
      }
      totalCount
    }
  }
`;

export const getProjects = gql`
  query Projects($paging: OffsetPaging!) {
    projects(paging: $paging) {
      nodes {
        name
        id
        created_date
      }
      totalCount
    }
  }
`;

2. Modify your useList implementation:

const { data, isLoading: projectsLoading, isFetched } = useList({
  resource: "projects",
  meta: {
    gqlQuery: getProjects
  }
});

const { data, isLoading: projectsLoading, isFetched } = useList({
  resource: "projects",
  meta: {
    gqlQuery: getProjects
  }
});

By making these changes, you're ensuring that the GraphQL response matches the structure expected by the useList hook in refine. The reason for this structure is explained in the Nest.js Query documentation (https://refine.dev/docs/data/packages/nestjs-query/#usage-with-graphql-tag):

Refine hooks' meta object has optional gqlQuery and gqlMutation properties, you can use them to write your queries and mutations.

The useList hook expects the data to be in a specific format, with nodes containing the actual data and totalCount for pagination purposes. If you're using a different GraphQL setup or if this solution doesn't work, you might need to create a custom data provider that correctly parses your GraphQL responses. You can refer to the GraphQL Data Provider documentation (https://refine.dev/docs/data/packages/graphql/#usage-with-graphql-tag) for more information on how to customize GraphQL usage with refine. Remember to adjust your backend to support this query structure if necessary. If you're using a different GraphQL schema or if you can't modify the backend, you might need to create a custom data provider to transform the data into the format expected by refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@349913091779330053> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

inland-turquoiseOP•3mo ago

this fixed my issue. good bot!

useList data is undefined, but graphql query returns correct data

Did you find this page helpful?