How to call external APIs?

Hi, I need to make external requests to some API endpoints, i can do that with axios but i want to know how to handle this better in this framework.

For Example, Requesting WP with JWT Authentication Plugin Installed to get Token and authenticate users.

I would also appreciate if somebody explains how to redirect to any other page, in my case it would be a dashboard.

Thanks!

Hi @aeyzazkhan!

We have already made fetch importable from frontity so it works in both the server and the client with the same code. For calling external API we recommend to import fetch from frontity and use it as usual.

import { fetch } from "frontity";

const data = fetch("externalURL")

This way, fetch will work in server and client, making it easier.

Could you explain this case a bit more, please? The dashboard where you want to redirect, is it external or is it another page of your web?

Please, let us know if the fetch works for you or share any questions you may have :slight_smile:

Thank you for explanation, shall i directly call the fetch in the page or its better to create a handler somewhere and then call it on my lets say sign in page.

I want users to be directed to Dashboard within the application after they are authenticated.

Hey @aeyzazkhan, that’s easy!

You just have to change the URL using actions.router.set.

// After authentication...
actions.router.set(dashboardUrl);

Thank you!

Handlers are useful when you want to “link” some data to a URL (or set of URLs).

The main benefit is that after creating the handler you don’t need to worry about fetching that data neither in the server or the client. It just works.

But if you are fetching data that is not important for SSR, like for example info after the user has logged in, it’s fine to do it with a normal fetch.

We use window.fetch instead of axios to avoid adding those KBs to the bundle. But import it from frontity as Mario explained so it works in the server as well.

1 Like

Ok, so if I want to fetch an external API (for ex if I want to do an e-commerce using shopify) can I do handlers for that, and the data will be SSR ?

Hi Alexandra :wave:
As Luis explained above

The thing that really is assuring your requests will work in both the server and the client is the fetch method that can be imported from frontity

This (frontity) fetch could be used;:

  • in a beforeSSR action
  • in handlers to perform some requests whenever you use actions.source.fetch to get data from a link
  • in a useEffect hook to get data only in the client side

Got it, so no need for a handler each time!

So… I am trying to fetch from some external API, but the content only shows up when I refresh the page and not on the initial load (when you click on the link where this content from API is). I used “handlers approach”.

Can somebody please explain what am I doing wrong and how to fix this?

In a Next.js application, you can make external API requests using the fetch() function or any third-party library like Axios or isomorphic-unfetch.

Here’s an example of using fetch() to make a request to an API endpoint:

javascript
Copy code
async function getToken() {
const response = await fetch(‘https://example.com/api/getToken’);
const data = await response.json();
return data;
}

const token = await getToken();
To authenticate a user with JWT, you can include the token in the headers of your API request. Here’s an example of how to do that:

javascript
Copy code
const response = await fetch(‘https://example.com/api/userData’, {
headers: {
Authorization: Bearer ${token}
}
});
const data = await response.json();
To redirect the user to another page after the API request is complete, you can use the useRouter() hook from Next.js. Here’s an example:

javascript
Copy code
import { useRouter } from ‘next/router’;

function Dashboard() {
const router = useRouter();
async function handleGetData() {
// Make API request here
// …
// Redirect to dashboard
router.push(’/dashboard’);
}
return (


Get Data and Redirect

);
}
In the example above, when the user clicks the “Get Data and Redirect” button, the handleGetData function is called. This function makes the API request and then redirects the user to the dashboard using the router.push() method.

In Laravel, you can use the Guzzle HTTP client to make external requests to API endpoints. Here’s an example of how to make a request to an API endpoint with Guzzle:

php
Copy code
use GuzzleHttp\Client;

$client = new Client();
$response = $client->request(‘GET’, ‘http://example.com/api/endpoint’);
$body = $response->getBody();
$data = json_decode($body);
In the example above, we first create a new instance of the Guzzle client. Then we make a GET request to an API endpoint using the request() method. We pass in the HTTP method (GET) and the API endpoint URL. The response is returned in the $response variable. We can get the response body using the getBody() method, and then decode the JSON response using the json_decode() function.

To redirect to another page in Laravel, you can use the redirect() helper function. Here’s an example:

php
Copy code
return redirect(’/dashboard’);
In the example above, we use the redirect() function to redirect the user to the /dashboard URL. You can replace /dashboard with any URL you want to redirect to