How do I fix error message ‘Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed’

I currently have the below JS code – I’m trying to make the image that’s uploaded into my HTML upload box appear in the box once it’s been uploaded by the user, but I keep getting an error message. The error message is:

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
const dropArea = document.getElementById("drop-area");
const inputFile = document.getElementById("input-file");
const imageView = document.getElementById("img-view");

inputFile.addEventListener("change", uploadImage);

function uploadImage() {
  let imgLink = URL.createObjectURL(inputFile.files[0]);
  imageView.style.backgroundImage = `url${imgLink}`;
}

HTML for reference:

  <form class="tg-form">
    <div>Upload Avatar</div>
    <div class="upload-container">
      <label for="input-file" id="drop-area">
        <input type="file" accept="image/*" id="input-file" hidden />
        <div class="inner-label-container">
          <div id="img-view">
            <img src="assets/images/icon-upload.svg" />
          </div>
          <div>Drag and drop or click to upload</div>
        </div>
      </label>
    </div>

How to fix this?

How to resolve barcode scanner promblem in web? [closed]

I have a problem with my web source code. I have made sure that the site is accessed via https and camera access permission is granted. However, the barcode scan display does not appear and only displays a white blank. I tried to access it via chrome on android.

This is my code

    <?php
$satuan_list = ['pcs', 'dus', 'pack', 'ball', 'renteng'];
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Form Input Barang</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    video {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body class="bg-light py-4">
<div class="container">
  <h2 class="text-center mb-4">Form Input Barang</h2>

  <form action="save_barang.php" method="POST" enctype="multipart/form-data" class="bg-white p-4 rounded shadow">
    <div class="mb-3">
      <label class="form-label">Nama Barang</label>
      <input type="text" name="nama_barang" class="form-control" required>
    </div>

    <div class="mb-3">
      <label class="form-label">Kode Gudang</label>
      <input type="text" name="kode_gudang" class="form-control" required>
    </div>

    <div class="mb-3">
      <label class="form-label">Vendor Penyedia</label>
      <input type="text" name="vendor" class="form-control" required>
    </div>

    <div class="mb-4">
      <label class="form-label">Foto Barang</label>
      <input type="file" name="foto" class="form-control" accept="image/*" capture="environment">
    </div>

    <?php foreach ($satuan_list as $satuan): ?>
    <div class="border rounded p-3 mb-4">
      <h5 class="mb-3">Satuan: <?= ucfirst($satuan) ?></h5>
      <input type="hidden" name="satuan[]" value="<?= $satuan ?>">

      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label">Stok (<?= $satuan ?>)</label>
          <input type="number" name="stok_<?= $satuan ?>" class="form-control">
        </div>

        <div class="col-md-4">
          <label class="form-label d-flex justify-content-between">
            <span>Barcode (<?= $satuan ?>)</span>
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="startScanner('barcode_<?= $satuan ?>')">Scan</button>
          </label>
          <input type="text" name="barcode_<?= $satuan ?>" id="barcode_<?= $satuan ?>" class="form-control barcode-input">
        </div>

        <div class="col-md-4">
          <label class="form-label">Harga Eceran</label>
          <div class="input-group">
            <span class="input-group-text">Rp.</span>
            <input type="number" step="0.01" name="harga_eceran_<?= $satuan ?>" class="form-control">
          </div>
        </div>

        <div class="col-md-4">
          <label class="form-label">Harga Grosir</label>
          <div class="input-group">
            <span class="input-group-text">Rp.</span>
            <input type="number" step="0.01" name="harga_grosir_<?= $satuan ?>" class="form-control">
          </div>
        </div>

        <div class="col-md-4">
          <label class="form-label">Min. Pembelian Harga Grosir</label>
          <input type="number" name="min_grosir_<?= $satuan ?>" class="form-control">
        </div>

        <?php if ($satuan != 'pcs'): ?>
        <div class="col-md-4">
          <label class="form-label">Isi per <?= $satuan ?> (pcs)</label>
          <input type="number" name="isi_per_pcs_<?= $satuan ?>" class="form-control">
        </div>
        <?php endif; ?>
      </div>
    </div>
    <?php endforeach; ?>

    <div class="d-grid gap-2">
      <button type="submit" class="btn btn-primary">Simpan Barang</button>
      <a href="list_barang.php" class="btn btn-secondary">Lihat Daftar Barang</a>
    </div>
  </form>

  <!-- Modal Scanner -->
  <div class="modal fade" id="scannerModal" tabindex="-1" aria-labelledby="scannerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Scan Barcode</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup" onclick="stopScanner()"></button>
        </div>
        <div class="modal-body">
          <video id="preview" autoplay muted playsinline style="width: 100%; border: 1px solid #ccc; border-radius: .5rem;"></video>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal" onclick="stopScanner()">Tutup</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/@ericblade/[email protected]/dist/quagga.min.js"></script>

<script>
let activeInput = null;
const scannerModal = new bootstrap.Modal(document.getElementById('scannerModal'));

function startScanner(inputId) {
  activeInput = document.getElementById(inputId);
  scannerModal.show();

  if (Quagga.running) {
    Quagga.stop();
  }

  console.log("Mulai inisialisasi scanner...");

  Quagga.init({
    inputStream: {
      type: "LiveStream",
      constraints: {
        facingMode: "environment"
      },
      target: document.querySelector('#preview')
    },
    decoder: {
      readers: ["ean_reader", "code_128_reader", "upc_reader"]
    }
  }, function(err) {
    if (err) {
      console.error("Gagal inisialisasi Quagga:", err);
      alert("Tidak bisa akses kamera: " + err.message);
      return;
    }
    console.log("Scanner berhasil dijalankan!");
    Quagga.start();
  });
}

function stopScanner() {
  if (Quagga.running) {
    Quagga.stop();
  }
}

Quagga.onDetected(result => {
  if (!result || !result.codeResult || !result.codeResult.code) return;

  const code = result.codeResult.code;
  if (activeInput) {
    activeInput.value = code;
    stopScanner();
    scannerModal.hide();
  }
});
</script>
</body>
</html>

and I also attached the display via the Android Chrome webbarcode visual

Need to have the custom Login / Signup Authentication for non-ecommerce wordpress website [closed]

I’m trying building a custom plugin in WordPress that requires login functionality. Could anyone please share their knowledge or guidance on the best way to handle login authentication?

I’m not in a mood of considering WooCommerce for its login features, I actually don’t need the full suite of eCommerce features like orders, products, etc., since this is a non-eCommerce website.

Are there any lightweight plugins that provide just login and authentication? Or would it be better to build a custom login/signup system that stores registered users in a separate table?

Any advice would be appreciated. Thanks!

Problem with Inertia.js SSR not rendering server-side in Laravel 12 with React

I’m experiencing issues with Server-Side Rendering (SSR) in a fresh Laravel 12 installation using the React starter kit. Despite following the documentation, the page continues to render client-side (CSR) instead of server-side.

Setup:

  • Laravel 12 (fresh installation)
  • Inertia.js with React starter kit
  • Node.js 22
  • Running composer dev:ssr (Vite SSR server starts on port 13714)

Problem:

  • SSR build completes without errors (resources/js/ssr.tsx)
  • Inertia SSR server runs on port 13714
  • Browser still shows CSR behavior (no server-rendered markup)

Same issue occurs in production with:

  • PM2 running php artisan inertia:start-ssr (tried also “node bootstrap/ssr/ssr.js”)

Server should return fully rendered HTML on initial page load.

How can I debug why SSR isn’t taking effect? Are there additional configuration steps I might be missing for Laravel 12?

Why am I getting unauthorized response error from Google OAuth?

I made a function which tries to get access token from refresh token, but i get an error:

Error: Failed to get access token, HTTP code: 401, response: { "error": "unauthorized_client", "error_description": "Unauthorized" }

I tried to test the url with keys on https://reqbin.com/ but there i also get unauthorized.

I tested some code with access token and it works so refresh token should also work.

function get_google_access_token() {
    $client_id = 'x';
    $client_secret = 'x';
    $refresh_token = 'x';

    $url = "https://oauth2.googleapis.com/token";

    $data = [
        "grant_type" => "refresh_token",
        "client_id" => $client_id,
        "client_secret" => $client_secret,
        "refresh_token" => $refresh_token,
    ];

    $options = [
        CURLOPT_URL => $url,
        CURLOPT_POST => true,
        CURLOPT_POSTFIELDS => http_build_query($data),
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_HTTPHEADER => [
            "Content-Type: application/x-www-form-urlencoded"
        ],
    ];

    $curl = curl_init();
    curl_setopt_array($curl, $options);
    $response = curl_exec($curl);
    $httpcode = curl_getinfo($curl, CURLINFO_HTTP_CODE);
    curl_close($curl);

    if ($httpcode !== 200) {
        throw new Exception("Failed to get access token, HTTP code: $httpcode, response: $response");
    }

    $result = json_decode($response, true);
    if (!isset($result['access_token'])) {
        throw new Exception("No access token found in response");
    }

    return $result['access_token'];
}

try {
    $accessToken = get_google_access_token();
    echo "Access Token: " . $accessToken;
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}



How to find the original Instagram post using asset_id received from webhook?

We are using Instagram’s Graph API and have implemented a webhook to listen for media shared in Direct messages. When someone shares a post via Direct, the webhook sends us an event payload that contains only an asset_id (e.g., a CDN media identifier).

However, we are unable to find a way to map this asset_id back to the original post (i.e., the media object or permalink on Instagram). We’ve looked through the Instagram Graph API documentation but couldn’t find a way to resolve an asset_id to a media ID or any useful metadata.

What we have:

A webhook event triggered when a user shares a post via Direct message.

The payload includes something like: “asset_id”: “17890012345678901”

What we want:

Find the original post ID or permalink using the asset_id.

What we’ve tried:

Searching through Instagram Graph API endpoints with media IDs and user tokens.

Checking if asset_id is queryable via /media or /media/{media-id}.

Looking for debugging tools or mappings via Meta for Developers portal.

Is there any way to reverse-lookup or resolve an asset_id to its corresponding Instagram post using Instagram Graph API or other official tools?

What is function of var in javascript [closed]

when I write this code answer wilL be 3,

Var gameLevel=1;
Var gameLevel=2;
 Var gameLevel=3;
alert("your game level is: " + gameLevel);

and when I write same problem without Var then again answer same,

Var gameLevel=1;
gameLevel=2;
gameLevel=3;
alert("your game level is: " + gameLevel);

can anyone answered me what has been happening here?

Why is my array passing the contains constraint in my JSON schema?

I am testing a schema (draft 2020-12) and data with the JSON Schema validator and I am wondering why the data is valid.
The test succeeds because the “contains” property is satisfied.

But when I am trying to invalidate the data with the first item of the first nested arrays, the test still succeeds because the item is not counted. Shouldn’t it be counted?

It is counted when both string have 5 chars and then the test fails, but not if only one string has 5 chars as below.

Below the schema and the data that passes the test and fails when all strings have 5 characters. Shouldn’t it fail now as 3 strings have 5 characters?

{
    "$schema": "https://json-schema.org/draft/2020-12/schema",
    "properties": {
        "array": {
            "type": "array",
            "items": {
                "items": {
                    "items": {
                        "properties": {
                            "c": {
                                "properties": {
                                    "d": {
                                        "maxLength": 6,
                                        "type": "string"
                                    }
                                },
                                "type": "object"
                            }
                        },
                        "type": "object"
                    },
                    "type": "array"
                },
                "type": "array"
            },
            "maxContains": 2,
            "contains": {
                "items": {
                    "items": {
                        "properties": {
                            "c": {
                                "properties": {
                                    "d": {
                                        "minLength": 5,
                                        "type": "string"
                                    }
                                },
                                "type": "object"
                            }
                        },
                        "type": "object"
                    },
                    "type": "array"
                },
                "type": "array"
            }
        }
    },
    "type": "object"
}
[
    [
        [
            {
                "c": {
                    "d": "abcd"
                }
            }
        ],
        [
            {
                "c": {
                    "d": "abcde"
                }
            }
        ]
    ],
    [
        [
            {
                "c": {
                    "d": "abcde"
                }
            }
        ]
    ],
    [
        [
            {
                "c": {
                    "d": "abcde"
                }
            }
        ]
    ]
]

Par où commencé dans le développement back-end? [closed]

Bonjour,

je suis en pleine reconversion professionnel et j’aimerais m’orienté vers le développement back-end. J’ai 22ans et je suis cariste magasinier de base donc rien avoir et j’ai un bac pro dans la menuiserie. J’avais aucune connaissance en informatique avant de vraiment m’informé et de ce fait, je ne sais pas vraiment par où commencé. Je sais toujours pas quel langage choisir, java, python, javascript ou autre. En sachant que je suis en autodidacte et que je compte utilisé l’ia copilot comme mentor quand je serais bloqué. Si vous pouvais m’aidé avec une roadmap et m’aidé à choisir un langage je vous serais très reconnaissant

Prevent null prop value in Vue 3.X

Defining the optional prop, although we may want to unify the undefined and null to something one, user can pass any of undefined or null.

If user will specify null, Vue will not emit any warnings because Vue considers the null as optional value:

// === vue-facing-decorators version
import {
  ComponentBase as VueComponentConfiguration,
  Vue as VueComponent,
  Prop as VueProperty,
} from "vue-facing-decorator";

@VueComponentConfiguration({ name: "Button" })
class Button extends VueComponent {

  @VueProperty({ type: String })
  protected readonly label?: string | null;

}
 
// === Vue options API version
export default {
  props: {
    label: {
      type: String,
      required: false
    }
  }
};

The isNonEmptyString will not prevent the null because Vue will recognize the null as omitted property and will not execute the validator:

import { isNonEmptyString } from "@yamato-daiwa/es-extensions";


// === vue-facing-decorators version
@VueComponentConfiguration({ name: "Button" })
class Button extends VueComponent {

  @VueProperty({ validator: isNonEmptyString })
  protected readonly label?: string | null;

}


// === Vue options API version
export default {
  props: {
    label: {
      validator: isNonEmptyString,
      required: false
    }
  }
};

But if Vue considers the null as omitted property, why it does not substitute it when default specified?!

import { isNonEmptyString } from "@yamato-daiwa/es-extensions";


// === vue-facing-decorators version
@VueComponentConfiguration({ name: "Button" })
class Button extends VueComponent {

  @VueProperty({ type: [ String, Array ], default: (): ReadonlyArray<string> => [] })
  protected readonly mainSlotWrapperAdditionalCSS_Classes!: ReadonlyArray<string> | string | null;


}

// === Vue options API version
export default {
  props: {
    mainSlotWrapperAdditionalCSS_Classes: {
      type: [String, Array],
      default: () => []
    }
  }
};

So, no way to prevent the null? We need to check each optional prop for both undefined and null or write the computed for these props? Too many routines for 202Xs, I want something more cleaner but doing all of this works.

You should use the TypeScript!!!

I am using, but TypeScirpt is NOT the solution of this problem because it works before executing of the script while Vue’s validation at the time of script execution. Same about React’s prop-types which has been deprecated as if TypeScript will validate props during the script execution instead.

The checking of the props during the script execution is important because:

  1. Component user could use JavaScript instead of TypeScript
  2. I know that in average company the development is executed chaotically with tens of TypeScript errors, even the notification of TypeScript has not been set well.

How to resolve barcode scanner promblem in web?

I have a problem with my web source code. I have made sure that the site is accessed via https and camera access permission is granted. However, the barcode scan display does not appear and only displays a white blank. I tried to access it via chrome on android.

This is my code

    <?php
$satuan_list = ['pcs', 'dus', 'pack', 'ball', 'renteng'];
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Form Input Barang</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    video {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body class="bg-light py-4">
<div class="container">
  <h2 class="text-center mb-4">Form Input Barang</h2>

  <form action="save_barang.php" method="POST" enctype="multipart/form-data" class="bg-white p-4 rounded shadow">
    <div class="mb-3">
      <label class="form-label">Nama Barang</label>
      <input type="text" name="nama_barang" class="form-control" required>
    </div>

    <div class="mb-3">
      <label class="form-label">Kode Gudang</label>
      <input type="text" name="kode_gudang" class="form-control" required>
    </div>

    <div class="mb-3">
      <label class="form-label">Vendor Penyedia</label>
      <input type="text" name="vendor" class="form-control" required>
    </div>

    <div class="mb-4">
      <label class="form-label">Foto Barang</label>
      <input type="file" name="foto" class="form-control" accept="image/*" capture="environment">
    </div>

    <?php foreach ($satuan_list as $satuan): ?>
    <div class="border rounded p-3 mb-4">
      <h5 class="mb-3">Satuan: <?= ucfirst($satuan) ?></h5>
      <input type="hidden" name="satuan[]" value="<?= $satuan ?>">

      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label">Stok (<?= $satuan ?>)</label>
          <input type="number" name="stok_<?= $satuan ?>" class="form-control">
        </div>

        <div class="col-md-4">
          <label class="form-label d-flex justify-content-between">
            <span>Barcode (<?= $satuan ?>)</span>
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="startScanner('barcode_<?= $satuan ?>')">Scan</button>
          </label>
          <input type="text" name="barcode_<?= $satuan ?>" id="barcode_<?= $satuan ?>" class="form-control barcode-input">
        </div>

        <div class="col-md-4">
          <label class="form-label">Harga Eceran</label>
          <div class="input-group">
            <span class="input-group-text">Rp.</span>
            <input type="number" step="0.01" name="harga_eceran_<?= $satuan ?>" class="form-control">
          </div>
        </div>

        <div class="col-md-4">
          <label class="form-label">Harga Grosir</label>
          <div class="input-group">
            <span class="input-group-text">Rp.</span>
            <input type="number" step="0.01" name="harga_grosir_<?= $satuan ?>" class="form-control">
          </div>
        </div>

        <div class="col-md-4">
          <label class="form-label">Min. Pembelian Harga Grosir</label>
          <input type="number" name="min_grosir_<?= $satuan ?>" class="form-control">
        </div>

        <?php if ($satuan != 'pcs'): ?>
        <div class="col-md-4">
          <label class="form-label">Isi per <?= $satuan ?> (pcs)</label>
          <input type="number" name="isi_per_pcs_<?= $satuan ?>" class="form-control">
        </div>
        <?php endif; ?>
      </div>
    </div>
    <?php endforeach; ?>

    <div class="d-grid gap-2">
      <button type="submit" class="btn btn-primary">Simpan Barang</button>
      <a href="list_barang.php" class="btn btn-secondary">Lihat Daftar Barang</a>
    </div>
  </form>

  <!-- Modal Scanner -->
  <div class="modal fade" id="scannerModal" tabindex="-1" aria-labelledby="scannerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Scan Barcode</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup" onclick="stopScanner()"></button>
        </div>
        <div class="modal-body">
          <video id="preview" autoplay muted playsinline style="width: 100%; border: 1px solid #ccc; border-radius: .5rem;"></video>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal" onclick="stopScanner()">Tutup</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/@ericblade/[email protected]/dist/quagga.min.js"></script>

<script>
let activeInput = null;
const scannerModal = new bootstrap.Modal(document.getElementById('scannerModal'));

function startScanner(inputId) {
  activeInput = document.getElementById(inputId);
  scannerModal.show();

  if (Quagga.running) {
    Quagga.stop();
  }

  console.log("Mulai inisialisasi scanner...");

  Quagga.init({
    inputStream: {
      type: "LiveStream",
      constraints: {
        facingMode: "environment"
      },
      target: document.querySelector('#preview')
    },
    decoder: {
      readers: ["ean_reader", "code_128_reader", "upc_reader"]
    }
  }, function(err) {
    if (err) {
      console.error("Gagal inisialisasi Quagga:", err);
      alert("Tidak bisa akses kamera: " + err.message);
      return;
    }
    console.log("Scanner berhasil dijalankan!");
    Quagga.start();
  });
}

function stopScanner() {
  if (Quagga.running) {
    Quagga.stop();
  }
}

Quagga.onDetected(result => {
  if (!result || !result.codeResult || !result.codeResult.code) return;

  const code = result.codeResult.code;
  if (activeInput) {
    activeInput.value = code;
    stopScanner();
    scannerModal.hide();
  }
});
</script>
</body>
</html>

and I also attached the display via the Android Chrome webbarcode visual

How can I return the max values and the keys from an object in Javascript?

I’m trying to build a function that takes a string as a parameter and return the character or characters that appear the most in the that string.
I have tried the code below but it only returns an array with the keys. I want to return someone like that: e appears 4 times and b appears 4 times in case both of them have the max value.

Below is my code and how I started:

const frequentChar = str =>{
    let count = {}
    for(let char of str.replace(/s/g, '')){
        if(count[char]){
            count[char] +=1
        }else{
            count[char] = 1
        }
    }
    const result = Object.keys(count).filter(x => {
        return count[x] == Math.max.apply(null, Object.values(count));
    });
    console.log(result);
}
frequentChar(text)

How to refetch from a client component with useQuery

I have a client component that fetches the list of project and a dialog box that creates a project but I cant update the project list unless I have to do a manual refresh on the browser.

The flow is:

  1. navigating to project page should fetch the project list. (working)
  2. submitting the dialog form should create a project. (working)
  3. after submitting dialog should close. (working)
  4. after closing the dialog box, it should refetch or query the project page again. (not working)

solutions that Ive tried:

  1. calling revalidatePath('/projects') this wont work because the project page is client component.
  2. calling redirect('/projects') (I don’t know why).
  3. tried calling window.location.reload(): inside the server component won’t work to.

project page code:

"use client";

import React from "react";
import {DataTable} from "./dataTable";
import {columns} from "./columns";
import {getProjectLists} from "@/app/api/projectActions";
import {useQuery} from "@tanstack/react-query";
import {Button} from "@/components/ui/button";

const ProjectPage = () => {
  const {data, isError, isLoading, error, isSuccess} = useQuery({
    queryKey: ["projects"],
    queryFn: () => getProjectLists(1, 10),
  });

  console.log("data", data);

  if (isLoading) {
    return <div className="text-center">Loading...</div>;
  }

  return (
    <div className="w-4/5 mx-auto py-10">
      {data && <DataTable columns={columns} data={data} />}
      <Button>
        {/* (This should something like infinite scroll. check react-query for code) */}
        Load More
      </Button>
    </div>
  );
};

export default ProjectPage;

I’m still new to react-query so I don’t have a clue. I tried using the refetch method won’t work it will do a infinite call.

this wont work

if(isSuccess) {
 refetch();
}

I’m not sure if I’m missing something on react-query.

GET App Route doesn’t get URL params in NextJS

I have an API APP route

app/api/resthistoryserv/route.ts [folder structure]

The call is being made like this:

const res = await fetch(
          `/api/resthistoryserv?client_id=ASDFASFDDFASD')}`
        );

/api/resthistoryserv?client_id=ASDFASFDDFASD

The call goes through but it doesn’t have the query params.

App route code:

export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams;
    console.log('nextUrl:', request.nextUrl);
    console.log('All received parameters:',   Object.fromEntries(searchParams.entries()));

    console.log('CLIENTID', searchParams.get('client_id'));
.....
}

This is what comes back when I try to print them:

nextUrl: NextURL {
  [Symbol(NextURLInternal)]: {
    url: URL {
      href: 'https://localhost:3000/api/resthistoryserv',
      origin: 'https://localhost:3000',
      protocol: 'https:',
      username: '',
      password: '',
      host: 'localhost:3000',
      hostname: 'localhost',
      port: '3000',
      pathname: '/api/resthistoryserv',
      search: '',
      searchParams: URLSearchParams {},
      hash: ''
    },
    options: { headers: [Object], nextConfig: undefined },
    basePath: '',
    domainLocale: undefined,
    defaultLocale: undefined,
    buildId: undefined,
    locale: undefined,
    trailingSlash: false
  }
}
All received parameters: {}
CLIENT ID null