should an external api call to get photos be a query or an action or custom api

should an external api call for a get request to see photos be a query or an action or custom api

5 Replies

Hi @haarismian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Wasp, a GET request to fetch data, such as photos, should be implemented as a Query. Queries in Wasp are designed for reading data from the server and they don't modify the server's state. This aligns with the purpose of a GET request in HTTP, which is to retrieve data. Here is an example of how you might declare a Query in Wasp:

query getPhotos {
  fn: import { getPhotos } from "@src/queries",
  entities: [Photo]
}

query getPhotos {
  fn: import { getPhotos } from "@src/queries",
  entities: [Photo]
}

In this example, getPhotos is a function you would implement in your src/queries.js file to fetch the photos from the external API. However, if you want to use the API externally, you can create custom HTTP API endpoints. To use the API externally, you simply call the endpoint using the method and path you used. For example, if your app is running at <https://example.com> then you could issue a GET to <https://example/com/foo/callback> (in your browser, Postman, curl, another web service, etc.). For more information, you can refer to the following documentation: - Queries in Wasp (https://wasp-lang.dev/docs/data-model/operations/queries) - Using the API externally (https://wasp-lang.dev/docs/advanced/apis#using-the-api-externally) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @haarismian, 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?

haarismianOP•6mo ago

@kapa.ai I just want to query an external api, namely pexels, to get photos using my search queries from my app from my users and I want to show the photos returned from pexels on my frontend, can you demonstrate all the code needed.

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry, but the provided knowledge sources do not contain specific information or examples on how to query an external API like Pexels from a Wasp application. However, I can guide you on a general approach based on the information available. 1. Create a Query in Wasp: You would need to declare a query in your Wasp code. This query would be responsible for making the request to the Pexels API.

query getPexelsPhotos {{
  fn: import {{ getPexelsPhotos }} from "@src/queries",
}}

query getPexelsPhotos {{
  fn: import {{ getPexelsPhotos }} from "@src/queries",
}}

2. Implement the Query Function: In your src/queries.js file, you would implement the getPexelsPhotos function. This function would use a HTTP client like axios or fetch to make the request to the Pexels API.

import axios from 'axios';

export async function getPexelsPhotos(searchQuery) {
  const response = await axios.get('<https://api.pexels.com/v1/search',> {
    params: { query: searchQuery },
    headers: { Authorization: 'Bearer YOUR_PEXELS_API_KEY' },
  });

  return response.data.photos;
}

import axios from 'axios';

export async function getPexelsPhotos(searchQuery) {
  const response = await axios.get('<https://api.pexels.com/v1/search',> {
    params: { query: searchQuery },
    headers: { Authorization: 'Bearer YOUR_PEXELS_API_KEY' },
  });

  return response.data.photos;
}

3. Use the Query in Your Component: In your React component, you would use the useQuery hook provided by Wasp to invoke the query and get the photos.

import { useQuery } from 'wasp/queries';
import { getPexelsPhotos } from '@wasp/queries/getPexelsPhotos';

export const PhotoGallery = ({ searchQuery }) => {
  const { data: photos, isLoading, error } = useQuery(getPexelsPhotos, { searchQuery });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {photos.map((photo) => (
        <img src={photo.src.medium} alt={photo.description} key={photo.id} />
      ))}
    </div>
  );
};

import { useQuery } from 'wasp/queries';
import { getPexelsPhotos } from '@wasp/queries/getPexelsPhotos';

export const PhotoGallery = ({ searchQuery }) => {
  const { data: photos, isLoading, error } = useQuery(getPexelsPhotos, { searchQuery });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {photos.map((photo) => (
        <img src={photo.src.medium} alt={photo.description} key={photo.id} />
      ))}
    </div>
  );
};

Please replace 'Bearer YOUR_PEXELS_API_KEY' with your actual Pexels API key. Remember, this is a general approach and might need adjustments based on the actual requirements of the Pexels API and your application. For more specific information, you should refer to the Wasp documentation (https://wasp-lang.dev/docs) and the Pexels API documentation (https://www.pexels.com/api/documentation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @haarismian, 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?

haarismianOP•6mo ago

how do i implement the photogallery @kapa.ai how do i implement this photogallery

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To implement the PhotoGallery component in your Wasp application, you would need to follow these steps: 1. Create a new React component file: In your src directory, create a new file for the PhotoGallery component. You can name it PhotoGallery.jsx. 2. Implement the PhotoGallery component: In the PhotoGallery.jsx file, you would implement the PhotoGallery component. This component uses the useQuery hook provided by Wasp to invoke the getPexelsPhotos query and get the photos. It then renders the photos or appropriate loading/error messages.

import { useQuery } from 'wasp/queries';
import { getPexelsPhotos } from '@wasp/queries/getPexelsPhotos';

export const PhotoGallery = ({ searchQuery }) => {
  const { data: photos, isLoading, error } = useQuery(getPexelsPhotos, { searchQuery });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {photos.map((photo) => (
        <img src={photo.src.medium} alt={photo.description} key={photo.id} />
      ))}
    </div>
  );
};

import { useQuery } from 'wasp/queries';
import { getPexelsPhotos } from '@wasp/queries/getPexelsPhotos';

export const PhotoGallery = ({ searchQuery }) => {
  const { data: photos, isLoading, error } = useQuery(getPexelsPhotos, { searchQuery });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {photos.map((photo) => (
        <img src={photo.src.medium} alt={photo.description} key={photo.id} />
      ))}
    </div>
  );
};

3. Use the PhotoGallery component in your application: You can now use the PhotoGallery component in your application. For example, if you have a MainPage component, you can include the PhotoGallery component in it like this:

import { PhotoGallery } from './PhotoGallery';

export const MainPage = () => {
  const searchQuery = 'nature'; // Replace this with the actual search query from your users.

  return (
    <div>
      <h1>Photo Gallery</h1>
      <PhotoGallery searchQuery={searchQuery} />
    </div>
  );
};

import { PhotoGallery } from './PhotoGallery';

export const MainPage = () => {
  const searchQuery = 'nature'; // Replace this with the actual search query from your users.

  return (
    <div>
      <h1>Photo Gallery</h1>
      <PhotoGallery searchQuery={searchQuery} />
    </div>
  );
};

Please note that this is a simplified example and you might need to adjust it based on the actual requirements of your application. For more information, you can refer to the Wasp documentation (https://wasp-lang.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @haarismian, 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?

Gaming

Programming

should an external api call to get photos be a query or an action or custom api