Issue encountered when attempting to utilize filters with strapi V4 graphql and nextjs, functionality not working

Currently, I am using strapi V4 along with the graphql extension. Everything works fine when I use filters with variables in the graphql Playground.

query getOrdersFilterList($searchstring: String!) {
orders(filters: { customer: { contains: $searchstring } }) {
    data {
      attributes {
        number
        customer
        name
        article
      }
    }
  }
}

Query Variables:

    {
  "searchstring": "zi"
}

When using filters with Postman, there are no issues either.

query getOrdersFilterList($searchstring: String) {
    orders(filters: {customer: { containsi:  $searchstring}}) {
        data {
            attributes {
                number
                customer
                name
                article
            }
        }
    }
}

Graphql Variables :

{
    "searchstring": "zi"
}

The expected result is as follows:

{
   "data": {
       "orders": {
           "data": [
               {
                   "attributes": {
                       "number": "30072",
                       "customer": "Stauder Zimmerei",
                       "name": "Hagmann Habsburgerstr.",
                       "article": "Stahlteile "
                   }
               },
               {
                   "attributes": {
                       "number": "22-02-015 A",
                       "customer": "Ziebarth Wolfgang",
                       "name": "Austr. 1 a",
                       "article": "Aussengeländer "
                   }
               },
               {
                   "attributes": {
                       "number": "30013",
                       "customer": "Ziser",
                       "name": "Bürklinstraße 7, Lahr",
                       "article": "Geländer mit Mlichglas "
                   }
               }
           ]
       }
   }
}

Now, moving on to my nextjs app code:

export const getOrdersFilterList = async (page, pageSize, searchstring) => {
   const data = await client.query({
    query: gql`
    query getOrdersFilterList($searchstring: String) {
    orders(filters: {customer: { contains:  $searchstring}}){
          data {
          attributes {
            number
            customer 
            name
            article
          }
        }
      }
    }`,
        variables: {searchstring}
  })

Variables remain the same as above (the searchstring comes from the function call).

{
    "searchstring": "zi"
}

Upon checking the console (Firefox), this is what I see: "Object { data: {…}, loading: false, networkStatus: 7 }"

I have spent days searching for a solution but can't seem to find a clue. Can anyone offer some help?

Answer №1

Issue Resolved! The problem was with the variable

{
    "searchstring": "zi"
}

In all tutorials and examples, I see it displayed like above. However, your variable only needs to contain

zi

Let me explain in the code:

export const getOrdersFilterList = async () => {
  // This is the variable
  const searchstring = "zi"
  // That's it
  const data = await client.query({
    query: gql`
    query getOrdersFilterList($searchstring: String) {
    orders(filters: {customer: { containsi:  $searchstring}}){
          data {
          attributes {
            number
            customer 
            name
            article
          }
        }
      }
    }`,
        variables: {searchstring}
  })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node.js offers a simple and efficient way to retrieve screen resolution. By using

I am trying to retrieve the screen resolution using node.js, but the code snippets provided are not working as expected. var w = screen.width; var h = screen.height; The following code also did not work for me: var w = window.screen.width; var h = windo ...

Experiencing a JSONP issue with an 'Access-Control-Allow-Origin' error

When working with PHP, I often use the following code to echo JSONP formatted data: echo $_GET['callback'] . '('.json_encode($arr).')'; In my AngularJS (JavaScript) code, I make a GET request like this: $http.get('http ...

The elusive 404 error strikes again as the Nginx server frantically searches for the default path 'etc/nginx/html/index.html' within the NextJS application

I've been struggling with a persistent 404 issue for days now and could really use some assistance. My system is CentOS7 (CPanel, VPS) with engintron for the nginx reverse proxy and pm2 to run my next.js application. default.conf server { listen ...

Trouble arises with the MUI 5 date picker when inputFormat is included

When I select a date from the calendar, everything works fine. However, if I set inputFormat="yyyy/MM/dd" and manually type in the date, it doesn't recognize the date format properly. Instead, it treats the input as a string like 11111111111 ...

Converting JSON data into objects in JavaScript

My task involves processing a large JSON list with over 2500 entries, formatted as follows: [ ['fb.com', 'http://facebook.com/'], ['ggle.com', 'http://google.com/'] ] This JSON list represents pairs of [&ap ...

Error: excessive recursion detected in <div ng-view="" class="ng-scope">

I've recently started learning angularJS and I've encountered an error that I need help with. Below is my index.html file: <body ng-app="myApp"> <div ng-view></div> <a href="table">click</a> <script ...

Displaying dynamic SVG with AngularJS

Trying to generate an SVG based on data from the scope, but encountering issues with rendering - it comes out empty or displays 'NaN' for some unknown reason. Additionally, errors are popping up right after the render process: Is there a way to ...

During model update, AngularJS experienced a loss of CSS class in DOM re-rendering

My challenge involves managing a table that dynamically updates via WebSocket messages, causing the selection state to be lost. The rows in this table loop through model data, and upon clicking a cell, all cells in the same row toggle to have an .active cl ...

Issue with dropdown element not triggering JavaScript onchange event

I am in the process of developing an application that involves searching a database and enabling users to compare the results. To achieve this, I require multiple dependent drop-down menus. While I have some understanding of HTML and PHP, my coding experti ...

Console log displays varied outputs for identical arrays

Having an array in a static form and one that is filled using the ajax post function, I initially planned to replace the static array with the dynamic one. However, upon closer inspection, it seems that the two arrays are not matching. Array 1 (static) ...

enhancement in bringing in ... from

Hey there, I've been working with Vue.js and came across an interesting challenge. In order to use components in Vue.js, you usually need to import them individually. I thought of a solution where we could create a module containing paths to all the c ...

Transferring items between different containers without using innerHTML

I've got an embedded <ul> within a (hidden) <aside id="idDetails">. How can I move the ul element from inside the aside and position it in a <div id="projectSide"> without using innerHTML? Any solutions in both plain JavaScript and j ...

Inject $scope into ng-click to access its properties and methods efficiently

While I know this question has been asked before, my situation is a bit unique. <div ng-repeat="hello in hello track by $index"> <div ng-click="data($index)"> {{data}} </div> </div> $scope.data = function($index) { $scope.sweet ...

Exposing the secrets of the Ajax module

Here is the code snippet I am working with: my.data = function () { var getAuth = function (userName, password) { var model = JSON.stringify({ "UserName": userName, "Password": password }); var result; $.ajax({ url: m ...

What is the best way to reset a setInterval ID in Angular?

In my Angular project, I am developing a simple timer functionality that consists of two buttons – one button to start the timer and another to stop it. The timer uses setInterval with a delay of 1000ms. However, when the stop button is pressed, the time ...

"Implement a function to append a new item to all JSON objects in an array if they share a common value with a different JSON object in the array using

Hi there, I'm new to Vue Js and I'm currently working on adding or merging new items in all JSON objects within an array that share the same value with another JSON object. I know how to push a new JSON object into an existing one, but I would re ...

Preserve the visibility of a text input form while the checkbox is selected

Within my HTML code, there is a form that includes a checkbox labeled "other." When this checkbox is selected, a textbox will appear. If the user types in text and submits the form, the textbox disappears, but the checkbox remains checked (as saved in loca ...

Engage in a Play app featuring AngularJS frontend navigation

Currently, I am using the Play Framework to develop a REST service and I would like the front end to be built with Angularjs in order to make rest calls. I have configured a route provider as follows: angular.module("getAbscencePlans", ["getAbscencePlans. ...

Showing a confirmation message to the user upon clicking outside of a specific section

On my webpage, I have a section for creating content, as well as a top bar and sidebar with internal links (both controlled by ng controllers). I am looking to implement a confirmation message that will appear if the user tries to leave the page while in t ...

applying the "active" class to both the parent and child elements

Looking for a way to apply an active class to both the parent and child elements when a user clicks on the child element within a list. The HTML structure is as shown below:- <ul class="tabs"> <li class="accordion"><a href="#tab1"> ...