API Setup & AJAX with fetch()

Hey @ameotoko

That's weird, the "debug toolbar" should catch all AJAX requests. Does it happen only with fetch(), what if you use axios or jQuery instead? (I'm not saying that you should switch libraries, this is only for debugging purposes)

Cheers!

Didn't work with jQuery either... but then I had a hunch – I added a timeout of 3 seconds before calling fetch() or jQuery.ajax(). I just wanted to absolutely make sure I can see the WDT before AJAX call is made... And sure enough – my AJAX calls are now being properly shown, with either fetch() or jQuery!

So the problem is – my frontend code is simply executed too fast, way before Symfony's javascript has enough time to load and initialize. I never thought I'd have to deal with THAT kind of problem ever 🤔

This is also annoying because I'm not sure what I can do... The production code is obviously fine. So I need to somehow check for dev environment or WDT being present, and do it from a React component? No idea...

Hey @Andrey!

Ha! That's good debugging!

This is also annoying because I'm not sure what I can do... The production code is obviously fine. So I need to somehow check for dev environment or WDT being present, and do it from a React component? No idea...

Yea, it's tricky. The WDT is loaded via Ajax itself... so indeed, it'll take a few hundred milliseconds before it registers its code to listen to the Ajax calls. If you care enough and are using Encore, I think you could use process.env.NODE_ENV in your code in an if statement. Iirc, we rewrite that to true/false based on if you're doing an encore dev or production build. That might be good enough.

Cheers!

Hey Xmontero,

If you want to use the correct URLs in your JS files - the best way is to generate the code with path() or url() Twig functions, i.e. generate URLs in Twig templates and pass them into the JS code. This way you will be sure that URLs are generated correctly. You can pass pre-geenrated URLs in a few ways, e.g. setting a data attribute on a tag an then read it from the JS code, or setting a global JS variable in script HTML tag in a Twig template, etc.

I hope this helps!

Cheers!

Tested, it works!

Just in case it helps anyone, what I did is:

1. Add a route with the base of the API path, with no methods available, so I can render it but it's not callable.
2. Add a <meta> tag in my header with the API base path.
3. In my javascript, read from the data attribute.

My javascript looked like this initially (hardcoded path, bad code):

// agent_api.js
export function getAgents() {
    return fetch( 'http://127.0.0.1:22080/repos/hello-trip/telethon-parsec_agent-panel/public/api/agents' )
        .then( response => response.json() );
}

To overcome this I've done those editions:

In the routing I added this non-callable route:

# api_agent_routes.yaml
api_root:
    path: /api/
    methods: []

[...]

In the base HTML template I added a meta tag before the javascripts, in the header:

    [...]
    <meta id="api-route" data-api-path="{{ path( 'api_root' ) }}">
    {% block javascripts %}
        {{ encore_entry_script_tags('app') }}
    {% endblock %}
</head>
[...]

In the javascript I get the data attribute as explained here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

export function getAgents() {
    const apiRouteElement = document.querySelector( '#api-route' );
    return fetch(  apiRouteElement.dataset.apiPath + 'agents' )
        .then( response => response.json() );
}

I hope this code helps someone serving from a subdir! Thanks @victor for the tip.

Hey Xmontero,

Awesome! Thanks for confirming it worked for you, and thanks for the details examples that could be useful to others!

Cheers!

I see! Very good idea! I'll try it!