import { inject, Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { toSignal } from '@angular/core/rxjs-interop'; export type Product = { id: string; title: string; description: string; image: string; price: string; }; @Injectable({ providedIn: 'root', }) export class ProductsService { readonly http = inject(HttpClient); readonly API = 'https://fakestoreapi.com'; $products = toSignal(this.http.get>(`${this.API}/products`)); }

export const notNextServerSideProps = async (fetch) => { const data = await fetch('https://fakestoreapi.com/products') .then(res => res.json()) .then(json => json); return { props: { title: 'All Products', products: data } } }

This is api for fake e-commerce data https://fakestoreapi.com/

Ne treba da kreces sa backom i da pravis nista sam jos uvek, treba ti neki REST API sa dummy podacima da konzumiras i prikazujes na svom frontu. Evo ti jedan

import useSWR from "swr"; import Image from "next/image"; const fetcher = async (url) => { const response = await fetch(url); if (!response.ok) { throw new Error("An error occurred while fetching the data."); } return response.json(); }; const ProductDetails = ({ id }) => { const { data: product, error, isLoading, } = useSWR(`https://fakestoreapi.com/products/${id}`, fetcher); if (isLoading) { return

Loading...div>; } if (error) { return

Error: {error.message}div>; } return (

{product.title}h1>

div>

{product.category}p>

${product.price}p>

{product.description}p> div> div> div> ); }; export async function getServerSideProps(context) { const { id } = context.query; return { props: { id, }, }; } export default ProductDetails;

{ "products": [ { "id": 1, "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops", "price": 109.95, "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday", "category": "men's clothing", "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg", "rating": { "rate": 3.9, "count": 120 } }, { "id": 2, "title": "Mens Casual Premium Slim Fit T-Shirts ", "price": 22.3, "description": "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.", "category": "men's clothing", "image": "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg", "rating": { "rate": 4.1, "count": 259 } }, { "id": 3, "title": "Mens Cotton Jacket", "price": 55.99, "description": "great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.", "category": "men's clothing", "image": "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg", "rating": { "rate": 4.7, "count": 500 } }, { "id": 4, "title": "Mens Casual Slim Fit", "price": 15.99, "description": "The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.", "category": "men's clothing", "image": "https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg", "rating": { "rate": 2.1, "count": 430 } }, { "id": 5, "title": "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet", "price": 695, "description": "From our Legends Collection, the Naga was inspired by the mythical water dragon that protects the ocean's pearl. Wear facing inward to be bestowed with love and abundance, or outward for protection.", "category": "jewelery", "image": "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg", "rating": { "rate": 4.6, "count": 400 } } ], "current_page": 1, "reach_max": false }

I'm working on a side project using fakestoreapi.com to populate data.

I am wanting to build a fake e-commerce store as a portfolio project and I was wondering if there are any good ones. Only one I know of is https://fakestoreapi.com/. Any other recommendations would be greatly appreciated!

Learn more about the API on their website.

I never really got graphql until I stumbled upon Wundergraph. (https://github.com/wundergraph/wundergraph). I have no affiliation with them except that I have been building an app with it. I'm honestly puzzled how it's not more popular. Maybe people are solving these problems in other ways? But I tried out a bunch of stuff: Vapor, Supabase, Hasura, etc. None of it simplifies building complex systems the way WG does.

I think their takes on graphql make sense: https://wundergraph.com/blog/graphql_is_not_meant_to_be_expo...

To demonstrate field usage metrics in Federation, I’ll be using WunderGraph Cosmo — a fully open source, fully self-hostable platform for Federation V1/V2 that is a drop in replacement for Apollo GraphOS.

The inverse is also true. As a technical founder, and maybe even an introvert like me, you should definitely look for a non-technical co-founder who can help you with networking, etc... I found my dream co-founder through YC Co-founder match and what can I say, it's going great. We're focusing on enterprise GraphQL/API solutions (https://wundergraph.com) and I benefit from the networking and communication abilities of Stefan, while I answer all technical questions. Tldr, I highly recommend to team up with people who complement your skills.

GraphQL Gateway is primarily responsible for serving GraphQL queries to consumers. It takes a query from a client, breaks it into smaller sub-queries, and executes that plan by proxying calls to the appropriate downstream subgraphs. When we started our journey, there was only Apollo Federation in the arena, and we used it. Still, now you can look at other options (e.g. Mercurius, Conductor, Hot Chocolate, Wundergraph, Hasura Remote Schemas), compare benchmarks and decide what's important and preferable for your needs. The Gateway provides a unified API for consumers while giving backend engineers flexibility and service isolation.

I'm a big fan of tRPC. It's amazing how it pushed TypeScript only stacks to the limit in terms of DX. Additionally, it made the GraphQL community aware of the limitations and tradeoffs of the Query language. At the same time, I think tRPC went through a really fast hype cycle and it doesn't look like we're seeing a massive move away from REST and GraphQL to RPC. That said, we see a lot of interest in RPC these days as we've adopted some ideas from tRPC and the old NextJS. In our BFF framework (https://wundergraph.com/) we've combined file based routing with RPC. In addition to tRPC, we're automatically generating a JSON Schema for each operation and an OpenAPI spec for the whole set of operations. People quite like this approach because you can easily share a set of RPC endpoints as an OpenAPI spec or postman collection. In addition, there are no discussions around HTTP verbs and such, there's only really queries, mutations and subscriptions. I'm curious what other people's experiences are with GraphQL, REST and RPC style APIs? What are you using these days and how many people/teams are involved/using your apis?

You can check out the source code on GitHub and leave a star if you like it. Follow me on Twitter, or join the discussion on our Discord server.

If you like the work we're doing and want to support us, give us a star on GitHub.