Wasp•3mo ago

how to pass through a json response from the server to the client without using react component

how do I pass through a json response from the server to the client without using react component. Example: if client is hosted on port 3000 at client.com, and I have an api endpoint hosted on port 3001 which the client is using API:

api getOauthClientMetadata {
  fn: import { getOauthClientMetadata } from "@src/server/getOauthClientMetadata.ts",
  httpRoute: (GET, "/oauth/client-metadata.json")
}

api getOauthClientMetadata {
  fn: import { getOauthClientMetadata } from "@src/server/getOauthClientMetadata.ts",
  httpRoute: (GET, "/oauth/client-metadata.json")
}

The API returns the following json:

import { Request, Response } from 'express';

export const getOauthClientMetadata  = async (_req: Request, res: Response) => {
  res.setHeader('Content-Type', 'application/json');
  res.status(200).json({
    application_type: "web",
    client_id: "https://oauth-flask.demo.bsky.dev/oauth/client-metadata.json",
    client_name: "atproto OAuth Flask Backend Demo",
    client_uri: "https://oauth-flask.demo.bsky.dev/",
    dpop_bound_access_tokens: true,
    grant_types: [
    "authorization_code",
    "refresh_token"
    ],
    jwks_uri: "https://oauth-flask.demo.bsky.dev/oauth/jwks.json",
    redirect_uris: [
    "https://oauth-flask.demo.bsky.dev/oauth/callback"
    ],
    response_types: [
    "code"
    ],
    scope: "atproto transition:generic",
    token_endpoint_auth_method: "private_key_jwt",
    token_endpoint_auth_signing_alg: "ES256"
    });
};

import { Request, Response } from 'express';

export const getOauthClientMetadata  = async (_req: Request, res: Response) => {
  res.setHeader('Content-Type', 'application/json');
  res.status(200).json({
    application_type: "web",
    client_id: "https://oauth-flask.demo.bsky.dev/oauth/client-metadata.json",
    client_name: "atproto OAuth Flask Backend Demo",
    client_uri: "https://oauth-flask.demo.bsky.dev/",
    dpop_bound_access_tokens: true,
    grant_types: [
    "authorization_code",
    "refresh_token"
    ],
    jwks_uri: "https://oauth-flask.demo.bsky.dev/oauth/jwks.json",
    redirect_uris: [
    "https://oauth-flask.demo.bsky.dev/oauth/callback"
    ],
    response_types: [
    "code"
    ],
    scope: "atproto transition:generic",
    token_endpoint_auth_method: "private_key_jwt",
    token_endpoint_auth_signing_alg: "ES256"
    });
};

how do I access the json from client.com/oauth/client-metadata.json as json

6 Replies

kapa.ai•3mo ago

Hi @dozieokk. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To access the JSON response from your API endpoint without using a React component, you can use the api object provided by Wasp for making HTTP requests from the client side. Here's how you can do it: 1. First, make sure your API is correctly defined in your Wasp file as you've shown:

api getOauthClientMetadata {
  fn: import { getOauthClientMetadata } from "@src/server/getOauthClientMetadata.ts",
  httpRoute: (GET, "/oauth/client-metadata.json")
}

api getOauthClientMetadata {
  fn: import { getOauthClientMetadata } from "@src/server/getOauthClientMetadata.ts",
  httpRoute: (GET, "/oauth/client-metadata.json")
}

2. In your client-side code (e.g., in a JavaScript file), you can use the api object to make a GET request to your endpoint. Here's an example:

import { api } from 'wasp/client/api';

async function fetchOauthClientMetadata() {
  try {
    const response = await api.get('/oauth/client-metadata.json');
    console.log(response.data); // This will be your JSON data
    return response.data;
  } catch (error) {
    console.error('Error fetching OAuth client metadata:', error);
  }
}

import { api } from 'wasp/client/api';

async function fetchOauthClientMetadata() {
  try {
    const response = await api.get('/oauth/client-metadata.json');
    console.log(response.data); // This will be your JSON data
    return response.data;
  } catch (error) {
    console.error('Error fetching OAuth client metadata:', error);
  }
}

This approach allows you to access the JSON response directly, without the need for a React component. The api object provided by Wasp is a wrapper around Axios, which handles the CORS and authentication details for you Using the API from the Client (https://wasp-lang.dev/docs/advanced/apis#using-the-api-from-the-client). Note that the server is running on port 3001, not 3000 as you might have expected. Wasp spins up two processes: one serving the client files (port 3000), and another one serving the server files (port 3001) Discord support thread (https://discord.com/channels/686873244791210014/1223328118278983680). You can call this function wherever you need the data in your application. The JSON response will be available as the data property of the response object. Remember that this approach still requires your client-side code to make an HTTP request, so it won't be available immediately when accessing client.com/oauth/client-metadata.json directly in the browser. If you need the JSON to be directly accessible at that URL without client-side JavaScript, you would need to set up a static file server or configure your backend to serve the JSON directly at that path. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @dozieokk, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

dozieokkOP•3mo ago

@kapa.ai Where do I define this: import { api } from 'wasp/client/api'; async function fetchOauthClientMetadata() { try { const response = await api.get('/oauth/client-metadata.json'); console.log(response.data); // This will be your JSON data return response.data; } catch (error) { console.error('Error fetching OAuth client metadata:', error); } }

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You can define this function in any client-side JavaScript or TypeScript file where you need to use it. Here are some common places where you might define this function: 1. In a dedicated API utility file: You could create a file like src/utils/api.js or src/utils/api.ts and define the function there. This approach allows you to centralize your API calls. 2. In a component file: If you're using this function in a specific component, you can define it directly in that component's file, outside of the component function. 3. In a custom hook: If you plan to use this functionality in multiple components, you might want to create a custom hook. For example, you could create a file src/hooks/useOauthClientMetadata.js or src/hooks/useOauthClientMetadata.ts. Here's an example of how you might define this in a custom hook:

import { useState, useEffect } from 'react';
import { api } from 'wasp/client/api';

export function useOauthClientMetadata() {
  const [metadata, setMetadata] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchOauthClientMetadata() {
      try {
        const response = await api.get('/oauth/client-metadata.json');
        setMetadata(response.data);
      } catch (error) {
        console.error('Error fetching OAuth client metadata:', error);
        setError(error);
      }
    }

    fetchOauthClientMetadata();
  }, []);

  return { metadata, error };
}

import { useState, useEffect } from 'react';
import { api } from 'wasp/client/api';

export function useOauthClientMetadata() {
  const [metadata, setMetadata] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchOauthClientMetadata() {
      try {
        const response = await api.get('/oauth/client-metadata.json');
        setMetadata(response.data);
      } catch (error) {
        console.error('Error fetching OAuth client metadata:', error);
        setError(error);
      }
    }

    fetchOauthClientMetadata();
  }, []);

  return { metadata, error };
}

You can then import and use this hook in any of your components. Remember, the api object is provided by Wasp and is available for import from 'wasp/client/api' in any of your client-side files Using the API from the Client (https://wasp-lang.dev/docs/advanced/apis#using-the-api-from-the-client). The exact location where you define this function depends on your project structure and how you plan to use it across your application. The key is to make sure it's in a client-side file and not in a server-side file. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @dozieokk, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Filip•2mo ago

@dozieokk All good here? If you need human help, tag me 🙂

dozieokkOP•2mo ago

Hey @Filip all good thanks!

MEE6•2mo ago

Wohooo @dozieokk, you just became a Waspeteer level 1!

Gaming

Programming

how to pass through a json response from the server to the client without using react component

Did you find this page helpful?