I'm struggling to create a similar query in GraphQL because I can't quite grasp how to execute it

Question

I'm struggling to create a similar query in GraphQL because I can't quite grasp how to execute it

I am currently developing a car rental application as a personal project. Within the /vehicles route, there are lists of available vehicles. I have included 5 select inputs on the left sidebar for filtering purposes. My goal is to apply a filter when a value is selected and remove it when no value is selected. I am struggling with deciding how to properly structure the query and data transmission process. Can anyone offer assistance?

subscription Vehicles($daily_price: String) {
      vehicles(where: { _or: { daily_price: $daily_price, fuel: {}, gear: {}, model_id: {}, brand_id: {} } }) {
        id
        fuel
    }

const { data, loading, error } = useSubscription(from && to ? VEHICLES_BY_DATE_RANGE : VEH_SUBS, {
      variables: {
         ...filters,
      },
   });

typescript next.js graphql

Answer 1

Answer №1

Here is an example of how to handle variables in your code. The type declarations are based on my assumptions from your snippets, so you may need to make adjustments.

// For brevity, I'm omitting the definition of Where filters and focusing on the query:
const VEH_SUBS = gql`
  subscription getVehicles($where: Where!) {
    vehicles(where: $where) {
      model {
        name
      }
    }
  }`;

// Assuming filter types based on your snippets (e.g. brand_id could be a number).
const createQuery = (filters: { brand_id?: string, fuel?: string, }) => {
  const filterConditions: {
    where: { _or: { brand_id?: { _eq?: string }, fuel?: { _eq?: string } } }
  } = { where: { _or: {} } };

  // Setting up filterConditions for brand_id and fuel.
  if (filters?.brand_id) filterConditions.where._or.brand_id = { _eq: filters.brand_id };
  if (filters?.fuel) filterConditions.where._or.fuel = { _eq: filters.fuel };

  const { data: d, loading: l, error: e } = useSubscription(
    VEH_SUBS, // This should be a query that accepts 'where' as an argument!
    { variables: {where: filterConditions }}
  );
  ...
};

I suggest using graphql-codegen to generate types instead of assuming them like I have done, and avoiding the use of any.

Answer 2

Here is an example of how to handle variables in your code. The type declarations are based on my assumptions from your snippets, so you may need to make adjustments.

// For brevity, I'm omitting the definition of Where filters and focusing on the query:
const VEH_SUBS = gql`
  subscription getVehicles($where: Where!) {
    vehicles(where: $where) {
      model {
        name
      }
    }
  }`;

// Assuming filter types based on your snippets (e.g. brand_id could be a number).
const createQuery = (filters: { brand_id?: string, fuel?: string, }) => {
  const filterConditions: {
    where: { _or: { brand_id?: { _eq?: string }, fuel?: { _eq?: string } } }
  } = { where: { _or: {} } };

  // Setting up filterConditions for brand_id and fuel.
  if (filters?.brand_id) filterConditions.where._or.brand_id = { _eq: filters.brand_id };
  if (filters?.fuel) filterConditions.where._or.fuel = { _eq: filters.fuel };

  const { data: d, loading: l, error: e } = useSubscription(
    VEH_SUBS, // This should be a query that accepts 'where' as an argument!
    { variables: {where: filterConditions }}
  );
  ...
};

I suggest using graphql-codegen to generate types instead of assuming them like I have done, and avoiding the use of any.

Answer 3

Answer №2

Apologies for the confusion in my earlier explanation of the issue at hand. Here's how I managed to resolve it, which might provide you with a clearer understanding:

function generateQuery(filterData: any) {
      const conditions = [];

      if (filterData?.category_id) conditions.push(`category_id : {_eq: "${filterData.category_id}"}`);
      if (filterData?.type) conditions.push(`type: {_eq: "${filterData.type}"}`);
      let query;
      if (conditions.length > 0) {
         query = `
            {
               _or: {${conditions.join(", ")}}
            }
         `;
      } else query = "{}";

      return gql`
            subscription fetchResults {
               results(where: ${query}) {
                  details {
                     description
                  }
               }
            }
         `;
   };

   const query = generateQuery(filterData);

   const { result: data, isLoading: loading, error: err } = useSubscription(query);

I sincerely appreciate your efforts and interest. However, it would be extremely helpful if you could grasp the problem and suggest an alternative solution.

Answer 4

Apologies for the confusion in my earlier explanation of the issue at hand. Here's how I managed to resolve it, which might provide you with a clearer understanding:

function generateQuery(filterData: any) {
      const conditions = [];

      if (filterData?.category_id) conditions.push(`category_id : {_eq: "${filterData.category_id}"}`);
      if (filterData?.type) conditions.push(`type: {_eq: "${filterData.type}"}`);
      let query;
      if (conditions.length > 0) {
         query = `
            {
               _or: {${conditions.join(", ")}}
            }
         `;
      } else query = "{}";

      return gql`
            subscription fetchResults {
               results(where: ${query}) {
                  details {
                     description
                  }
               }
            }
         `;
   };

   const query = generateQuery(filterData);

   const { result: data, isLoading: loading, error: err } = useSubscription(query);

I sincerely appreciate your efforts and interest. However, it would be extremely helpful if you could grasp the problem and suggest an alternative solution.

I'm struggling to create a similar query in GraphQL because I can't quite grasp how to execute it

Answer №1

Answer №2

Similar questions

Ways to showcase the refined object array upon clicking a button in Angular

Unresolved issue with RxJS - Finalize not triggering

In TypeScript, at what level should the timeout be specified?

The next.js docker error I encountered was related to getServerSideProps, showing a connection error with code "connect ECONNREFUSED 172.25.0.2

Cannot locate AngularJS + Typescript controller

Issue: App(...) is not rendering anything. This typically indicates that a return statement is missing in discord.js using react and typescript

The Azure DevOps pipeline is programmed to generate Personal Access Tokens (PAT) and halt

Encountering a node-sass error while attempting to build due to upgrading node version

Top method for extracting a correlation matrix using an API endpoint

Angular's mechanism for detecting changes in a callback function for updates

What could be causing the global npm package to not be utilized for module dependencies?

Managing the outcome of numerous asynchronous calls before accessing the database post-result collection

Variations in comparing tuple types in TypeScript

Craft fresh items within HTTP request mapping

Switch the ngClass on the appropriate ancestor element for the dropdown menu

The Angular2 view is failing to display updated data from a shared service

Troubleshooting: Models Not Loading in Next.js with Sequelize

Updating the status of a parent state in a functional component with React is a common task. Here

Tsc encounters issues when interacting with AWS services

Adding data-attributes to a Checkbox component using inputProps in React