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

Tips for extracting data from arrays with multiple dimensions - (JavaScript)

I am looking to extract string values from a multi-dimensional array and store them in a new array as the answer. For Example : var dimStr = [ "First-one", ["Double-one", "Double-two", "Double-three", ["Triple-one", "Triple-two"] ], "First-two" ] ; The ...

How can I incorporate a new object into an existing object in ReactJS?

I am facing an issue where I have an object named waA that is required in the final step. However, in ReactJS, the new object is not updating the previous object using a switch statement in a function. Below is the code for the object: waA = { jso ...

Learn how to utilize JavaScript produced by the `webpack output library` in a `nodejs` application

I'm currently utilizing webpack to bundle my JavaScript into a library that serves two purposes: one for browser usage and the other for integration into Node.js applications. Below is a snippet of my webpack configuration: output: { filename: ...

Achieving intellisense functionality in TypeScript without the use of classes

Just dipped my toes into TypeScript, attempting to convert this basic JavaScript code to TypeScript. Here is the JavaScript code snippet: Item = {} Item.buy = function (id) {} Item.sell = function (id) {} I prefer not to use classes and would like to ut ...

Error message: "npm start cannot locate package.json file, even though the file is present

As I attempt to execute npm start within my Node.js project directory, I am facing a challenge. Despite having the package.json file in the correct location (C:\Myfirstproject\Vinci\Projet_Web), I keep encountering an error message that read ...

Problem with transitioning to a different page on Next.js

I am having trouble navigating to a different page in Next.js using the router.push function. The goal is to route to "example.js" by utilizing a variable called ChangePage, which leads to a single div element on that page. However, despite following the ...

In Node.js and Postgresql, encountering the error "Trying to access a property that is undefined" is common and can be frustrating

const pool = new pg.Pool(config); var tablename = req.body.tablename; pool.connect(function (err, client, done) { var query_get_value = 'SELECT * FROM '+ tablename; client.query(query_get_value, function (err, result) { d ...

The value from the angular UI bootstrap datepicker is unavailable when using a JQuery expression

I have a question regarding the datepicker feature from the Angular UI bootstrap library. The documentation can be found here. After selecting a date using the datepicker, I am facing an issue with retrieving the text input using jQuery expressions. When ...

Encountered a problem while rendering the app: [TypeError: Unable to assign a value to the property 'content' since it is undefined]. Implementing Express with

My experience with res.render is flawless: res.render('main', function(err, html){ // Displays '<html></html>' from 'views/main.html' console.log(html); }); However, the situation changes when it comes to ...

Apache causes HTML download tag to malfunction

I have an HTML file that includes the following code: <a href="/Library/WebServer/Documents/file.zip" download="file.zip"> Download here </a> When I test this HTML page on Chrome, it successfully allows me to download the file. However, when ...

Obtain the coordinates of the pixel in an image on the canvas when a mouse

I am currently working on a project that involves using canvas. I have set a picture as the background of the canvas and would like to be able to get the original pixel point when clicking in the image area. In order to achieve this, I need to convert canv ...

Is it feasible for a JavaScript function to receive the innerHTML of the element from which it is invoked as an argument?

Is there a way to bind a function that takes a String as a parameter to a button so that it is called onclick and takes the innerHTML of the element as a parameter, without assigning the button an id or using queryselector? <button onclick="myFunct ...

Looking to adjust the API response to fit the necessary JSON format for an Angular project?

A modification is needed in the API response to align with the required JSON format provided below. The current responses and the desired format are detailed for reference. Assistance is appreciated. The current representation of individual's data ne ...

The appearance of the circle in Safari is rough and lacks smoothness

My circle animation works perfectly on Google Chrome, but when I switch to Safari the edges appear faded and blurry. I tried adding "webkit" to fix it, but had no luck. Is there a compatibility issue with Safari and CSS animations? Here is my code: Snapsh ...

Why is the "module" field used in the package.json file?

Recently, I came across certain npm packages such as vue that contain a module field in their package.json files. Interestingly, the official documentation for package.json does not mention the module field - is this some kind of convention being followed ...

Creating an extra dialogue box when a button is clicked in React

Having an issue with displaying a loading screen pop-up. I have an imported component named LoadingDialog that should render when the state property "loading" is true. When a user clicks a button on the current component, it triggers an API call that chang ...

Creating a popup window for multiple file uploads in ASP.NET using VB.NET

Hello, I am trying to create a popup window with multiple file upload options. When the 'UploadDocument' button is clicked, I want the popup window to appear. I have attempted to do this but it is not working as expected. Currently, the popup ap ...

ESLint error: EROFS read-only does not correspond to any directory

Can anyone help me with this issue? I am experiencing a problem when using Linux dual boot, but everything works fine when I use Windows. ERROR in [eslint] EROFS: read-only file system, open '/media/naufal/6878124278121004/Refactory/Skill-Test-Re ...

Utilize JavaScript to parse HTML content retrieved through AJAX requests

My current project involves writing JavaScript code, specifically a Chrome extension, that needs to: Retrieve the contents of a web page using AJAX. Extract specific content from the page by identifying certain elements within the HTML string and retriev ...

The class 'ConsoleTVsChartsCharts' could not be located

Attempting to implement Laravel charts using the package consoletvs/charts:6.*, Utilizing service providers ConsoleTVs\Charts\ChartsServiceProvider::class, With an alias: 'Charts' => ConsoleTVs\Charts\Charts::class, ...