Filter nested fields in NestJS-Query

How do I filter nested fields when using useTable hook from Antd? Dot notation doesn't seem to work

13 Replies

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not cover information about filtering nested fields specifically with the useTable hook from Ant Design in the context of NestJS-Query or any other backend framework. The extracts focus on basic usage of filtering, including client-side filtering and initial filter and sorter setup, but do not delve into the specifics of handling nested fields. For more detailed guidance on using useTable with Ant Design in refine, including advanced filtering techniques that might be applicable to your scenario, I recommend consulting the official refine documentation directly: Refine useTable Hook Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/). If you're working with NestJS-Query on the backend and trying to integrate it with refine's useTable on the frontend, it might also be helpful to look into NestJS-Query's documentation for any specifics on how it handles nested field filtering and then apply that knowledge to how you set up your useTable hook. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

conscious-sapphire•5mo ago

@kapa.ai Hasura data provider supports dot notation in filters to filter nested fields, is there similiar option for Netjs-Query data provider?

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided in the extracts, there is no specific mention of the NestJS-Query data provider supporting dot notation for filtering nested fields similar to the Hasura data provider. The extracts focus on the implementation and feature requests related to the Hasura data provider, including the introduction of dot notation for filtering nested objects. For the Hasura data provider, the feature request and subsequent implementation of dot notation for nested filters were discussed and confirmed in the context of a GitHub issue. Here's how the dot notation was planned to be implemented for Hasura:

{
 field: "category.type",
 operator: "eq",
 value: "value";
}

{
 field: "category.type",
 operator: "eq",
 value: "value";
}

However, the extracts do not provide similar details for the NestJS-Query data provider or any indication that such a feature exists or is planned. For accurate and up-to-date information on whether the NestJS-Query data provider supports dot notation or any other method for filtering nested fields, I recommend consulting the official refine documentation or the GitHub repository for the NestJS-Query data provider package. The official documentation is the best source for learning about available features, updates, and how to use them effectively. Refine Documentation: Refine Documentation (https://refine.dev/docs/) Since the specific information you're looking for isn't available in the extracts provided, checking the documentation directly will give you the most reliable and current information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

conscious-sapphire•5mo ago

@kapa.ai I'm using this query in my Table component:

import gql from 'graphql-tag';

// Query to get events
export const EVENTS_QUERY = gql`
  query EventsList(
    $filter: EventFilter!
    $sorting: [EventSort!]
    $paging: OffsetPaging!
  ) {
    events(filter: $filter, sorting: $sorting, paging: $paging) {
      nodes {
        id
        category
        created
        price
        name
        length
        description
        date
        venue {
          id
        }
      }
    }
  }
`;

import gql from 'graphql-tag';

// Query to get events
export const EVENTS_QUERY = gql`
  query EventsList(
    $filter: EventFilter!
    $sorting: [EventSort!]
    $paging: OffsetPaging!
  ) {
    events(filter: $filter, sorting: $sorting, paging: $paging) {
      nodes {
        id
        category
        created
        price
        name
        length
        description
        date
        venue {
          id
        }
      }
    }
  }
`;

And I keep getting this error: Uncaught Error: Objects are not valid as a React child (found: object with keys {id}). If you meant to render a collection of children, use an array instead. Why is that happening? In the example CRM App template from refine this type of query works without errror

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error you're encountering, "Uncaught Error: Objects are not valid as a React child (found: object with keys {id}). If you meant to render a collection of children, use an array instead," typically occurs in React when you try to render an object directly in the JSX without properly accessing its properties. This is not directly related to the GraphQL query itself but rather how you're attempting to display the data returned by the query in your React component. Given the extracts provided, there's no direct mention of handling or rendering GraphQL query results in React components. However, based on common practices with GraphQL and React, if your query successfully returns data and you're trying to render the venue field (which is an object with an id property) directly in your component, you should ensure you're accessing the id property of the venue object correctly. For example, if you're iterating over events and trying to display each event's venue ID, you should do something like this:

events.map(event => (
  <div key={event.id}>
    <p>Event Name: {event.name}</p>
    <p>Venue ID: {event.venue.id}</p> {/* Access the id property of venue */}
  </div>
))

events.map(event => (
  <div key={event.id}>
    <p>Event Name: {event.name}</p>
    <p>Venue ID: {event.venue.id}</p> {/* Access the id property of venue */}
  </div>
))

Make sure you're not trying to render the venue object directly like so, as this will cause the error you're seeing:

<p>Venue: {event.venue}</p> // Incorrect, will cause error

<p>Venue: {event.venue}</p> // Incorrect, will cause error

If you're following a pattern from the example CRM App template mentioned and it's working there but not in your case, double-check how the data is being accessed and rendered in the template. There might be a slight difference in how you're handling the venue object or any other object in your query results. Unfortunately, without more specific details on how you're rendering the data in your component, this is the best guidance I can provide based on the information available. For more detailed examples and best practices on rendering data fetched from GraphQL in React components, I recommend reviewing the official React and GraphQL documentation or the specific documentation and examples provided by refine if they're available. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the new information that you're not trying to display the data in your React component, but you're still encountering the error, it seems there might have been a misunderstanding or a missing part of the question. Without the specific details of how you're using the EVENTS_QUERY within your component or the context in which the error occurs, it's challenging to provide a precise solution. Given the extracts and the information provided, there's no direct mention or example of handling or troubleshooting GraphQL query results in React components that would directly relate to the error you're encountering. The error message you've shared typically relates to how data is rendered in React, suggesting an object is being treated as a React child. If you're not trying to display the data and the error is still occurring, it might be related to how the data is being processed or passed within your component. Here are a few general troubleshooting steps you can consider: 1. Check the Query Usage: Ensure that the EVENTS_QUERY is being used correctly with a GraphQL client like Apollo Client. The query itself should be correctly formatted (which it seems to be based on your submission). 2. Inspect the Data Handling: Even if you're not displaying the data, ensure that any manipulation or processing of the query results does not inadvertently treat an object as a React child. This could happen in various ways outside of the direct rendering. 3. Review Component Structure: If there's any part of your component that might implicitly convert the query result into a React child (for example, through conditional rendering or passing data to child components), review those areas closely. 4. Debugging: Use console.log or a debugger to inspect the query result immediately after it's fetched to ensure it's in the expected format and to identify where in the component lifecycle the error might be introduced. Without the ability to see how the EVENTS_QUERY is integrated into your component or more context about the error, these general steps are the best guidance I can offer. If you're looking for more specific help related to refine or GraphQL queries within a refine context, I recommend consulting the refine documentation (https://refine.dev/docs/) or searching for similar issues in the refine GitHub repository (https://github.com/refinedev/refine) where you might find similar scenarios or examples that could help resolve your issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

conscious-sapphire•5mo ago

@kapa.ai This is how I'm using my component:

export const EventList = ({ children }: React.PropsWithChildren) => {
  useDocumentTitle('Events - Applausio');
  const go = useGo();
  const { tableProps, filters } = useTable({
    resource: 'events',
    onSearch: (values: any) => {
      return [
        {
          field: 'name',
          operator: 'contains',
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 20,
    },
    sorters: {
      initial: [
        {
          field: 'created',
          order: 'desc',
        },
      ],
    },
    filters: {
      initial: [
        {
          field: 'name',
          operator: 'contains',
          value: undefined,
        },
      ],
    },
    meta: {
      gqlQuery: EVENTS_QUERY,
    },
  });

  return (
    <div>
      <List
        breadcrumb={false}
        headerButtons={() => (
          <CreateButton
            onClick={() => {
              go({
                to: { resource: 'events', action: 'create' },
                options: { keepQuery: true },
                type: 'replace',
              });
            }}
          />
        )}
      >
        <Table {...tableProps} pagination={{ ...tableProps.pagination }}>
          <Table.Column<Event>
            dataIndex="name"
            title="Name"
            defaultFilteredValue={getDefaultFilter('id', filters)}
            filterIcon={<FilterFilled />}
            filterDropdown={(props) => (
              <FilterDropdown {...props}>
                <Input placeholder="Event Name" />
              </FilterDropdown>
            )}
            render={(value, record) => (
              <Space>
                <Text style={{ whiteSpace: 'nowrap' }}>{record.name}</Text>
              </Space>
            )}
          />

export const EventList = ({ children }: React.PropsWithChildren) => {
  useDocumentTitle('Events - Applausio');
  const go = useGo();
  const { tableProps, filters } = useTable({
    resource: 'events',
    onSearch: (values: any) => {
      return [
        {
          field: 'name',
          operator: 'contains',
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 20,
    },
    sorters: {
      initial: [
        {
          field: 'created',
          order: 'desc',
        },
      ],
    },
    filters: {
      initial: [
        {
          field: 'name',
          operator: 'contains',
          value: undefined,
        },
      ],
    },
    meta: {
      gqlQuery: EVENTS_QUERY,
    },
  });

  return (
    <div>
      <List
        breadcrumb={false}
        headerButtons={() => (
          <CreateButton
            onClick={() => {
              go({
                to: { resource: 'events', action: 'create' },
                options: { keepQuery: true },
                type: 'replace',
              });
            }}
          />
        )}
      >
        <Table {...tableProps} pagination={{ ...tableProps.pagination }}>
          <Table.Column<Event>
            dataIndex="name"
            title="Name"
            defaultFilteredValue={getDefaultFilter('id', filters)}
            filterIcon={<FilterFilled />}
            filterDropdown={(props) => (
              <FilterDropdown {...props}>
                <Input placeholder="Event Name" />
              </FilterDropdown>
            )}
            render={(value, record) => (
              <Space>
                <Text style={{ whiteSpace: 'nowrap' }}>{record.name}</Text>
              </Space>
            )}
          />

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the code snippet you've provided for using your component, it appears you're utilizing the useTable hook from refine to fetch and display a list of events. The error you mentioned earlier, "Objects are not valid as a React child (found: object with keys {id})", does not seem directly related to the code snippet you've shared since this snippet does not attempt to render the venue object or any other nested object directly. Your component is correctly structured for use with refine's useTable hook, specifying a GraphQL query (EVENTS_QUERY), defining initial filters, and setting up pagination and sorting. The rendering logic for the Table.Column related to the name field also appears correctly implemented, focusing on displaying the event's name without directly rendering any complex objects. Given this context, if you're still encountering the error, it might be happening outside the provided code snippet or due to how other parts of your application are handling the data. Here are a few suggestions based on the provided code: 1. Verify Data Structure: Ensure that the data structure returned by your GraphQL query matches what you expect and that no fields are returning objects when you expect scalar values (like strings or numbers). 2. Check Other Components: If you have other components or columns within your table that attempt to render nested objects directly, review those to ensure they properly access object properties. 3. Review GraphQL Query: Double-check your EVENTS_QUERY to ensure it's structured correctly and that the data it returns is in the expected format. Specifically, look at how nested objects like venue are queried and later used. 4. Debugging: Use console.log to log out the data being passed to your table and any other components to pinpoint where the error might be occurring. This can help identify if a specific part of the data is causing the issue. Since the error message you mentioned typically relates to rendering issues in React and the provided code snippet does not show direct rendering of objects as React children, the problem might lie in parts of the code not shown here. If you're using other components or rendering logic not included in the snippet, I recommend reviewing those areas closely. For more detailed examples and documentation on using refine, including the useTable hook and handling GraphQL queries, you can refer to the official refine documentation: Refine Documentation (https://refine.dev/docs/). Unfortunately, without more specific details or the full context of your component's implementation, this is the best guidance I can offer based on the information provided. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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