{title}
-Loading...
}
- />
-
- 
-
GraphQL
- - -### About : - -This documentation will cover the basics of GraphQL API's. It will include why and when to use GraphQL API's. In this documentation we will cover GraphQL examples with Node.js and Express. - -## What is GraphQL ? -GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. It has many advantages over REST API's while used with large scale applications. It allows the developer to get exactly the data they want without overfetching or underfetching. - -## GraphQL vs REST Structure -Below you can see the difference between REST and GraphQL API Structures. It's important to understand how REST works to see the benefits of GraphQL. As it is seen GraphQL can only perform POST requests and to update data it uses mutations. - -GraphQL: -
-
-REST:
-
-## GraphQL Elements
-GraphQL has some different keywords then REST. These are:
- - Schema
- - TypeDefs
- - Queries
- - Muations
-
-### Sample JSON Data
-This JSON file is going to be act as a database.
-```jsx
-[
-{"id":1,"pizza_name":"Cheese Pizza", "price": "10$", "ingredients":["Mushrooms","Olives","Extra Cheese"]},
-{"id":2,"pizza_name":"Pepperoni Pizza", "price": "12$", "ingredients":["Pepperoni","Mushrooms","Olives"]},
-{"id":3,"pizza_name":"Veggie Pizza", "price": "15$", "ingredients":["Mushrooms","Olives","Green Peppers","Onions","Extra Cheese"]},
-{"id":4,"pizza_name":"Meat Pizza", "price": "20$", "ingredients":["Pepperoni","Mushrooms","Olives","Sausage","Black Olives","Green Peppers","Onions","Extra Cheese"]},
-{"id":5,"pizza_name":"Margherita Pizza", "price": "10$", "ingredients":["Olives","Sausage","Black Olives"]},
-{"id":6,"pizza_name":"BBQ Chicken Pizza", "price": "18$", "ingredients":["Chicken","Mushrooms","Olives","Sausage","Black Olives","Green Peppers","Onions","Extra Cheese"]},
-{"id":7,"pizza_name":"Hawaiian Pizza", "price": "16$", "ingredients":["Mushrooms","Olives","Sausage","Black Olives","Green Peppers","Onions","Extra Cheese"]}
-]
-```
-### Schema
-Schema is the place where the queries and mutations are stored. Both the front-end and back-end team can look at the schema and understand the API.
-
-You can see an example schema down below with express and GraphQL.
-```jsx
-const Query = new GraphQLObjectType({...});
-const Mutation = new GraphQLObjectType({...});
-
-//Schema
-const schema = new GraphQLSchema({
- query: Query,
- mutation: Mutation,
-});
-
-app.use('/graphql', graphqlHTTP({
- schema,
- graphiql: true
-}));
-```
-The graphiql boolean allows us to open a in browser API testing app.
-
-### Type Defs
-Every graph uses a **schema** to define the types of data it includes. You can think of them just like type definitions from Java like **int**, **string**, **float** etc.
-```jsx
-const PizzaType = new GraphQLObjectType({
- name: 'Pizza',
- fields: {
- id: {type: GraphQLInt},
- pizza_name: {type: GraphQLString},
- price: {type: GraphQLString},
- ingredients: {type: GraphQLList(GraphQLString)},
- }
-});
-```
-
-### Queries
-Queries allows us to get data from our API.
-```jsx
-const Query = new GraphQLObjectType({
- name: 'Query',
- fields: {
- getAll: {
- type: new GraphQLList(PizzaType),
- resolve(parent, args) {
- return pizzaDB;
- }
- }
- }
-});
-```
-
-The great thing about queries is that it allows us to get any data we want. If we want all the data but not the **id** we can do that with just one request in GraphQL and there won't be any unused data so it's going to prevent overfetching.
-```jsx
-query {
- getAll {
- pizza_name
- price
- ingredients
- }
-}
-```
-### Mutations
-Mutations allows us to mutate our data. We can use mutations to update, delete and etc. inside our API. In the below example we create a mutation to add a new pizza to our pizza JSON database.
-```jsx
-const Mutation = new GraphQLObjectType({
- name: 'Mutation',
- fields: {
- createNewPizza: {
- type: PizzaType,
- args: {
- pizza_name: {type: GraphQLString},
- price: {type: GraphQLString},
- ingredients: {type: GraphQLList(GraphQLString)}
- },
- resolve(parent, args) {
- pizzaDB.push({
- id: pizzaDB.length + 1,
- pizza_name: args.pizza_name,
- price: args.price,
- ingredients: args.ingredients
- });
-
- return args;
- }
- }
- }
-});
-```
-
-At below we execute our mutation like this. We don't need to specify the ID since it automatically increases its id to the size of the JSON data. This prevents human error factor. The fallowing query inside of the **createNewPizza** will display the new items that got added.
-```jsx
-mutation {
- createNewPizza(pizza_name: "New Pizza", price: "0$", ingredients: ["tomato", "pepper", "cheese"]) {
- id
- pizza_name
- price
- infredients
- }
-}
-```
diff --git a/README.md b/README.md
index 019c35b..be12dd7 100644
--- a/README.md
+++ b/README.md
@@ -1,45 +1,52 @@
-# Sample APIs 3.1
-
-
-
-## Purpose
-
-Understanding RESTful APIs is hard enough, even without including an authentication mechanism. The sole purpose of this repository is to play with RESTful endpoints and learn. We have a few endpoints that you can start playing around with right away! If you are not finding anything you are interested in, create your own endpoints and/or submit a pull request. Take a look at the [CONTRIBUTING](https://github.com/jermbo/SampleAPIs/blob/master/CONTRIBUTING.md) for more information on how to get involved.
-
-# How to use the service
-
-Choose an endpoint, say "futurama", then choose what information you'd like, say "characters":
-```Javascript
-const baseURL = "https://api.sampleapis.com/futurama/characters";
-fetch(baseURL)
- .then(resp => resp.json())
- .then(data => console.log(data));
-```
-
-Want to Search? for all chatacters with the name "Bender"?
-```Javascript
-const baseURL = "https://api.sampleapis.com/futurama/characters";
-fetch(`${baseURL}?name.first=Bender`)
- .then(resp => resp.json())
- .then(data => console.log(data));
-```
-You also have full CRUD, so you can add information or correct existing ones.-*Note*: Just know that we reset all datapoints weekly and each time we have a new endpoint added. -
-
- -## Changes - -Hosting has switched again due to `Vercel.com`'s static nature. The app is being self hosted and is back to being fully CRUD-able. - -Checkout the [Change Log](https://github.com/jermbo/SampleAPIs/blob/master/Change_log.md) for full details. - -## Disclaimers - -- The data on this site is for educational purposes only and is not owned by SampleAPIs.com -- Data will be reset back to its original state on a regular basis. If you are updating or adding data to the endpoints and want to have them persist as part of the collection, please contribute to the repo by submitting a pull request. -- By using SampleAPIs.com you agree to the following terms: This service is provided under an "as is" condition. It might change or will be discontinued without prior notice. The maker of this service can't be held liable in any way for any reason. - - -## Recent changes. -Ok. a LOT of work from the great Jermbo, and then a little fluf from TheDamian to make it more pretty! +# Sample APIs + + + +## Purpose + +Understanding RESTful APIs is hard enough without wrestling with authentication at the same time. SampleAPIs is a free playground of sample REST endpoints for learning: no keys, no tokens, no sign-up. Pick an endpoint and start fetching. If you don't find data you like, [contribute your own](CONTRIBUTING.md). + +## How to use the service + +Choose an API, say `futurama`, then choose a resource, say `characters`: + +```javascript +const resp = await fetch("https://api.sampleapis.com/futurama/characters"); +const data = await resp.json(); +console.log(data); +``` + +Want to search? Filter by any field, including nested ones: + +```javascript +const resp = await fetch("https://api.sampleapis.com/futurama/characters?name.first=Bender"); +const data = await resp.json(); +console.log(data); +``` + +You also have full CRUD — `POST`, `PUT`, `PATCH`, and `DELETE` all work and actually persist. The data resets to its original state on a regular basis (and whenever new endpoints ship), so experiment freely. The full query syntax, pagination, and error shapes are documented in the [API docs](docs/api/README.md). + +## Documentation + +The [project wiki](docs/README.md) covers the whole system in short, linked pages — architecture, the API surface, the data lifecycle, the React client, operations, and the reasoning behind the design. + +## Running locally + +Requires Node.js ≥ 26. + +```bash +npm install && npm install --prefix server && npm install --prefix client +npm run dev +``` + +API at `http://localhost:5555`, site at `http://localhost:4444`. Details (including the Docker setup) live in [Local Development](docs/operations/local-development.md). + +## Contributing + +The most valued contribution is a new dataset. Start with the [Contributing guide](docs/contributing/getting-started.md) and [Adding an Endpoint](docs/data/adding-an-endpoint.md). For history, see the [Change Log](Change_log.md). + +## Disclaimers + +- The data on this site is for educational purposes only and is not owned by SampleAPIs.com. +- Data is reset back to its original state on a regular basis. If you want your additions to persist as part of the collection, contribute them via pull request. +- By using SampleAPIs.com you agree to the following terms: this service is provided as-is. It might change or be discontinued without prior notice. The maker of this service can't be held liable in any way for any reason. diff --git a/checkdiff.sh b/checkdiff.sh index f12077c..d3d55f7 100755 --- a/checkdiff.sh +++ b/checkdiff.sh @@ -15,11 +15,6 @@ if [ "$DIFF" != "" ] then echo "beers modified" fi -DIFF=$(diff bitcoin.json bitcoin.json.backup) -if [ "$DIFF" != "" ] -then - echo "bitcoin modified" -fi DIFF=$(diff cartoons.json cartoons.json.backup) if [ "$DIFF" != "" ] then @@ -95,11 +90,6 @@ if [ "$DIFF" != "" ] then echo "recipes modified" fi -DIFF=$(diff rickandmorty.json rickandmorty.json.backup) -if [ "$DIFF" != "" ] -then - echo "rickandmorty modified" -fi DIFF=$(diff simpsons.json simpsons.json.backup) if [ "$DIFF" != "" ] then diff --git a/client/.eslintrc b/client/.eslintrc deleted file mode 100644 index 3effc69..0000000 --- a/client/.eslintrc +++ /dev/null @@ -1,39 +0,0 @@ -{ - "env": { - "browser": true, - "node": true, - "jquery": true, - "jest": true - }, - "extends": [ - "react-app", - "react-app/jest" - ], - "globals": {}, - "parserOptions": { - "ecmaVersion": 2020, - "sourceType": "module" - }, - "rules": { - "indent": [ - "error", - 2 - ], - - "quotes": [ - "error", - "double" - ], - "semi": [ - "error", - "always" - ], - "no-unused-vars": [ - 1, - { - "ignoreRestSiblings": true, - "argsIgnorePattern": "res|next|e|^err|^evt" - } - ] - } -} diff --git a/client/.gitignore b/client/.gitignore index bd5e6e6..09b7045 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -11,6 +11,5 @@ dist-ssr .env.development.local .env.test.local .env.production.local -package-lock.json _old \ No newline at end of file diff --git a/client/.oxlintrc.json b/client/.oxlintrc.json new file mode 100644 index 0000000..673a424 --- /dev/null +++ b/client/.oxlintrc.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://raw.githubusercontent.com/oxc-project/oxc/main/npm/oxlint/configuration_schema.json", + "ignorePatterns": ["dist", "src/routeTree.gen.ts", "templates"], + "plugins": ["react", "typescript", "unicorn"], + "env": { + "browser": true, + "es2022": true + }, + "rules": { + "no-console": ["warn", { "allow": ["warn", "error"] }], + "eqeqeq": "warn" + } +} diff --git a/client/Dockerfile b/client/Dockerfile new file mode 100644 index 0000000..7eaca67 --- /dev/null +++ b/client/Dockerfile @@ -0,0 +1,28 @@ +# Use Node.js 26 +FROM node:26-alpine + +# Set working directory +WORKDIR /app + +# Install necessary tools +RUN apk add --no-cache wget + +# Copy package files +COPY package*.json ./ + +# Install dependencies +RUN npm install + +# Copy the rest of the application +COPY . . + +# Build the application +RUN npm run build + +ENV NODE_ENV=production + +# Expose port 4444 +EXPOSE 4444 + +# Serve the production build (vite preview) rather than the dev server. +CMD ["npm", "run", "preview", "--", "--host", "--port", "4444"] diff --git a/client/README.md b/client/README.md index f29c6c1..82c65a2 100644 --- a/client/README.md +++ b/client/README.md @@ -1,47 +1,18 @@ -# Sample APIs - React Application +# Sample APIs — React Client -## Generate new templates +The front end for [SampleAPIs](https://sampleapis.com): a Vite + React 19 + TypeScript app. How it all works is documented in the project wiki — start with [Client Features](../docs/features/README.md). -We are utilizing [Generate React CLI](https://github.com/arminbro/generate-react-cli) to help stream line and standardize the process of creating new components for our application. +## Commands -We can customized the outputs to fit this applications needs and have expanded the definition of types. Below are a list of commands you can use to create new components, pages, layouts, or hooks. - -### Component - -By default, we are creating components. Simply run this command and let the CLI take care of the rest. - -```JavaScript -npx generate-react-cli component [NAME] -``` - -* Replace `[NAME]` with the desired name. - -### Page - -When generating a new page, you run the same command but with a `--type` flag of page. - -```JavaScript -npx generate-react-cli component [NAME] --type=page +```bash +npm run dev # dev server with HMR at http://localhost:4444 +npm run build # type-check (tsc) + production build +npm run preview # serve the production build +npm run lint # oxlint ``` -* Replace `[NAME]` with the desired name. +The dev server expects the API server running at `http://localhost:5555` — see [Local Development](../docs/operations/local-development.md). -### Layout - -When generating a new layout, you run the same command but with a `--type` flag of layout. - -```JavaScript -npx generate-react-cli component [NAME] --type=layout -``` - -* Replace `[NAME]` with the desired name. - -### Hooks - -Just like everything else, hooks have some boiler plate code as well. To create a new hook, simply the add the `--type` flag of hook/ - -```JavaScript -npx generate-react-cli component [NAME] --type=hook -``` +## Conventions -* Replace `[NAME]` with the desired name. +New components follow the existing patterns: one folder per component under `src/components/` (pages under `src/pages/`, with a matching route file in `src/routes/`), typed as `React.FC
{api.metaData.title}
+
+
);
};
diff --git a/client/src/components/CodepenWrapper/CodepenWrapper.scss b/client/src/components/CodepenWrapper/CodepenWrapper.scss
deleted file mode 100644
index e1d73d1..0000000
--- a/client/src/components/CodepenWrapper/CodepenWrapper.scss
+++ /dev/null
@@ -1 +0,0 @@
-.CodepenWrapper {}
\ No newline at end of file
diff --git a/client/src/components/CodepenWrapper/CodepenWrapper.tsx b/client/src/components/CodepenWrapper/CodepenWrapper.tsx
deleted file mode 100644
index 7c062a9..0000000
--- a/client/src/components/CodepenWrapper/CodepenWrapper.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-// @ts-ignore
-import Codepen from "react-codepen-embed";
-
-interface Props {
- hash: string;
- title: string;
-}
-
-const CodepenWrapper: React.FC
-
-
- -
-
- - - GraphQL - - {endpoints.map((endpoint) => (
- - diff --git a/client/src/components/Header/Header.scss b/client/src/components/Header/Header.scss deleted file mode 100644 index e69de29..0000000 diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx index 776681a..e328a0b 100644 --- a/client/src/components/Header/Header.tsx +++ b/client/src/components/Header/Header.tsx @@ -1,5 +1,5 @@ import React, { useContext } from "react"; -import { Link } from "react-router-dom"; +import { Link } from "@tanstack/react-router"; import { GlobalContext } from "../../context/GlobalContext"; import Nav from "../Nav/Nav"; @@ -18,7 +18,12 @@ const Header: React.FC