useCustom filters

When I try to use useCustom to get total counts, the filter I define doesn't get applied to the query.

const { data, isLoading, refetch } = useCustom({
    url: '',
    method: 'get',
    meta: {
      gqlQuery: TOTAL_COUNTS_QUERY,
    },
    config: {
      filters: [
        {
          field: 'business.id',
          operator: 'eq',
          value: sessionStorage.getItem('currentBusiness'),
        },
      ],
    },
  });

const { data, isLoading, refetch } = useCustom({
    url: '',
    method: 'get',
    meta: {
      gqlQuery: TOTAL_COUNTS_QUERY,
    },
    config: {
      filters: [
        {
          field: 'business.id',
          operator: 'eq',
          value: sessionStorage.getItem('currentBusiness'),
        },
      ],
    },
  });

Here is my query for total counts:

export const TOTAL_COUNTS_QUERY = gql`
  query TotalCounts {
    thisWeekCustomers: businessUsers {
      totalCount
    }
    lastWeekCustomers: businessUsers(
      filter: { created: { lte: "${pastDate(1)}" } }
    ) {
      totalCount
    }
    twoWeeksAgoCustomers: businessUsers(
      filter: { created: { lte: "${pastDate(2)}" } }
    ) {
      totalCount
    }
    thisWeekEvents: events {
      totalCount
    }
    lastWeekEvents: events(
      filter: { created: { lte: "${pastDate(1)}" } }
    ) {
      totalCount
    }
    twoWeeksAgoEvents: events(
      filter: { created: { lte: "${pastDate(2)}" } }
    ) {
      totalCount
    }
    thisWeekMemberships: memberships {
      totalCount
    }
    lastWeekMemberships: memberships(
      filter: { created: { lte: "${pastDate(1)}" } }
    ) {
      totalCount
    }
    twoWeeksAgoMemberships: memberships(
      filter: { created: { lte: "${pastDate(2)}" } }
    ) {
      totalCount
    }
  }
`;

export const TOTAL_COUNTS_QUERY = gql`
  query TotalCounts {
    thisWeekCustomers: businessUsers {
      totalCount
    }
    lastWeekCustomers: businessUsers(
      filter: { created: { lte: "${pastDate(1)}" } }
    ) {
      totalCount
    }
    twoWeeksAgoCustomers: businessUsers(
      filter: { created: { lte: "${pastDate(2)}" } }
    ) {
      totalCount
    }
    thisWeekEvents: events {
      totalCount
    }
    lastWeekEvents: events(
      filter: { created: { lte: "${pastDate(1)}" } }
    ) {
      totalCount
    }
    twoWeeksAgoEvents: events(
      filter: { created: { lte: "${pastDate(2)}" } }
    ) {
      totalCount
    }
    thisWeekMemberships: memberships {
      totalCount
    }
    lastWeekMemberships: memberships(
      filter: { created: { lte: "${pastDate(1)}" } }
    ) {
      totalCount
    }
    twoWeeksAgoMemberships: memberships(
      filter: { created: { lte: "${pastDate(2)}" } }
    ) {
      totalCount
    }
  }
`;

8 Replies

kapa.ai•5mo ago

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useCustom hook in Refine is used to send custom query requests. It uses the custom method as the query function from the dataProvider which is passed to <Refine>. The useCustom hook expects the url and method properties, which will be passed to the custom method from the dataProvider as parameters. When properties are changed, the useCustom hook will trigger a new request. In your case, you are trying to apply a filter to the useCustom hook. The filters property is part of the config object and it will be passed to the custom method from the dataProvider as a parameter. It can be used to send the filter query parameters of the request. Here is an example of how to use the filters property in the useCustom hook:

useCustom({  
 config: {  
 filters: [  
 {  
 field: "title",  
 operator: "contains",  
 value: "Foo",  
 },  
 ],  
 },  
});

useCustom({  
 config: {  
 filters: [  
 {  
 field: "title",  
 operator: "contains",  
 value: "Foo",  
 },  
 ],  
 },  
});

In your case, you are trying to filter by business.id. Make sure that the business.id field exists in your data and that the value you are trying to filter by is correct. Also, ensure that the custom method in your dataProvider is correctly handling the filters parameter. If you are still having issues, it might be helpful to check how your dataProvider is handling the custom method and how it's processing the filters parameter. You can refer to the Refine documentation on the custom method (https://refine.dev/docs/data/data-provider#custom) for more information. Also, note that useCustom should not be used when creating, updating, or deleting a resource. It does not invalidate queries and therefore will not update the application state. If you need to customize the mutation request, use the useCustomMutation hook instead. Sources: - useCustom Hook (https://refine.dev/docs/data/hooks/use-custom) - custom Method (https://refine.dev/docs/data/data-provider#custom) - useCustom filters (https://refine.dev/docs/data/hooks/use-custom#configfilters) ---------------------- 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

absent-sapphire•5mo ago

@kapa.ai Where do I apply filters in the custom method?

custom: async ({ url, method, headers, meta, filters }) => {
    if (url) {
      client.setEndpoint(url);
    }

    if (headers) {
      client.setHeaders(headers);
    }

    const gqlOperation = meta?.gqlMutation ?? meta?.gqlQuery;

    if (gqlOperation) {
      const response: any = await client.request(
        gqlOperation,
        meta?.variables ?? {},
      );

      return { data: response };
    }

    if (meta?.rawQuery) {
      const response = await client.request<BaseRecord>(
        meta.rawQuery,
        meta.variables,
      );

      return { data: response };
    }

    if (meta) {
      if (meta.operation) {
        let query, variables;

        if (method === 'get') {
          const gqlQuery = builder.query({
            operation: meta.operation,
            fields: meta.fields,
            variables: meta.variables,
          });

          query = gqlQuery.query;
          variables = gqlQuery.variables;
        } else {
          const gqlMutation = builder.mutation({
            operation: meta.operation,
            fields: meta.fields,
            variables: meta.variables,
          });

          query = gqlMutation.query;
          variables = gqlMutation.variables;
        }

        const response = await client.request<BaseRecord>(query, variables);

        return {
          data: response[meta.operation],
        };
      } else {
        throw Error('GraphQL operation name required.');
      }
    } else {
      throw Error(
        'GraphQL needs operation, fields and variables values in meta object.',
      );
    }
  },

custom: async ({ url, method, headers, meta, filters }) => {
    if (url) {
      client.setEndpoint(url);
    }

    if (headers) {
      client.setHeaders(headers);
    }

    const gqlOperation = meta?.gqlMutation ?? meta?.gqlQuery;

    if (gqlOperation) {
      const response: any = await client.request(
        gqlOperation,
        meta?.variables ?? {},
      );

      return { data: response };
    }

    if (meta?.rawQuery) {
      const response = await client.request<BaseRecord>(
        meta.rawQuery,
        meta.variables,
      );

      return { data: response };
    }

    if (meta) {
      if (meta.operation) {
        let query, variables;

        if (method === 'get') {
          const gqlQuery = builder.query({
            operation: meta.operation,
            fields: meta.fields,
            variables: meta.variables,
          });

          query = gqlQuery.query;
          variables = gqlQuery.variables;
        } else {
          const gqlMutation = builder.mutation({
            operation: meta.operation,
            fields: meta.fields,
            variables: meta.variables,
          });

          query = gqlMutation.query;
          variables = gqlMutation.variables;
        }

        const response = await client.request<BaseRecord>(query, variables);

        return {
          data: response[meta.operation],
        };
      } else {
        throw Error('GraphQL operation name required.');
      }
    } else {
      throw Error(
        'GraphQL needs operation, fields and variables values in meta object.',
      );
    }
  },

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The filters parameter in your custom method is not being used in the current implementation. To apply filters, you need to include them in your GraphQL query or mutation. The exact way to do this depends on your GraphQL schema and how it handles filtering. Generally, you would include a filter argument in your GraphQL operation that takes an input type representing your filter criteria. Here's a simplified example of how you might include filters in a GraphQL query:

const gqlQuery = builder.query({
    operation: meta.operation,
    fields: meta.fields,
    variables: {
        ...meta.variables,
        filter: filters,
    },
});

const gqlQuery = builder.query({
    operation: meta.operation,
    fields: meta.fields,
    variables: {
        ...meta.variables,
        filter: filters,
    },
});

In this example, filters is an array of filter objects, each with a field, operator, and value property. This array is passed as a filter argument to the GraphQL operation. Please note that this is a simplified example and might not work in your specific case. The exact implementation depends on your GraphQL schema and how it handles filtering. You might need to transform the filters array into a format that your GraphQL server can understand. Also, remember to handle the case where filters is undefined, as it is an optional parameter. Sources: - useCustom Hook (https://refine.dev/docs/data/hooks/use-custom) - custom Method (https://refine.dev/docs/data/data-provider#custom) - useCustom filters (https://refine.dev/docs/data/hooks/use-custom#configfilters) ---------------------- 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

absent-sapphire•5mo ago

@kapa.ai that doesn't work

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that the previous suggestion didn't work. The implementation of filters in the custom method largely depends on how your GraphQL server handles filtering. In your custom method, you're using a builder to construct your GraphQL queries and mutations. If this builder supports filters, you would need to pass the filters to it in the appropriate format. However, without more information about your GraphQL schema, the builder you're using, and how they handle filters, it's difficult to provide a more specific solution. I would recommend checking the documentation or source code of the builder you're using to see how it handles filters. You might also want to consult your GraphQL server's documentation or schema to see how it expects filters to be formatted in queries and mutations. If you're still having trouble, you might want to consider asking for help in a more specific context, such as a forum or community related to your builder, GraphQL server, or the refine framework. Sources: - useCustom Hook (https://refine.dev/docs/data/hooks/use-custom) - custom Method (https://refine.dev/docs/data/data-provider#custom) - useCustom filters (https://refine.dev/docs/data/hooks/use-custom#configfilters) ---------------------- 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