Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/the-katsu/rickandmortywiki
net 7, Blazor WASM, GraphQL.Client
https://github.com/the-katsu/rickandmortywiki
blazor blazor-wasm blazor-webassembly csharp docker docker-compose graphql graphql-client net7
Last synced: about 1 month ago
JSON representation
net 7, Blazor WASM, GraphQL.Client
- Host: GitHub
- URL: https://github.com/the-katsu/rickandmortywiki
- Owner: The-Katsu
- License: apache-2.0
- Created: 2023-02-12T21:40:55.000Z (almost 2 years ago)
- Default Branch: release
- Last Pushed: 2023-03-01T19:51:58.000Z (almost 2 years ago)
- Last Synced: 2024-11-12T11:02:34.621Z (about 1 month ago)
- Topics: blazor, blazor-wasm, blazor-webassembly, csharp, docker, docker-compose, graphql, graphql-client, net7
- Language: C#
- Homepage:
- Size: 23.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Rick And Morty Wiki Blazor App
You can try it on GitHub Pages here Rick And Morty Wiki
Stack: .NET 7, Blazor WASM App, GraphQL.Client
---
- Navigation
- [Pages](#pages)
- [Containerizing of Blazor WebAssembly App](#containerizing-of-blazor-webassembly-app)
- [Example of using GraphQL Client](#example-of-using-graphql-client)
- [Example of GraphQl request/response](#example-of-graphql-request-response)
---
## Pages
~ Home ~
~ Characters ~
~ Characters search ~
~ Character ~
~ Pagination ~
~ Episodes ~
~ Locations ~
~ Adaptive :) ~
## Containerizing of Blazor WebAssembly App
*Delete github actions script from index.html & 404.html if you have
1. Create nginx.conf
```javascript
events { }
http {
include mime.types;
server {
listen 80;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html =404;
}
}
}
```
2. Create Dockerfile
*Invoke from parent directory if you have additional libraries (like Application, Domain, etc)
```sql
FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
FROM mcr.microsoft.com/dotnet/sdk:7.0 AS build
WORKDIR /src
COPY ["src/Presentation/RickAndMortyWiki/RickAndMortyWiki.csproj", "src/Presentation/RickAndMortyWiki/"]
COPY ["src/Core/RickAndMortyWiki.Application/RickAndMortyWiki.Application.csproj", "src/Core/RickAndMortyWiki.Application/"]
COPY ["src/Core/RickAndMortyWiki.Domain/RickAndMortyWiki.Domain.csproj", "src/Core/RickAndMortyWiki.Domain/"]
RUN dotnet restore "src/Presentation/RickAndMortyWiki/RickAndMortyWiki.csproj"
COPY . .
WORKDIR "/src/src/Presentation/RickAndMortyWiki"
RUN dotnet build "RickAndMortyWiki.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "RickAndMortyWiki.csproj" -c Release -o /app/publish
FROM nginx:alpine AS final
WORKDIR /usr/share/nginx/html
COPY --from=publish /app/publish/wwwroot .
COPY nginx.conf /etc/nginx/nginx.conf
```
3. Create docker-compose.yaml
```yaml
version: '3.4'
services:
blazorapp:
image: blazorandmorty
build:
context: .
dockerfile: Dockerfile
ports:
- 8080:80
```
4. Ron "docker-compose up" command
5. Done
## Example of using GraphQL Client
The strength of GraphQl is that we ourselves determine the values we need
```cs
// Base model for GraphQl response (data : { response: { info: { } results: { } } })
public class Response where T : class
{
public Information Info { get; set; } = null!;
public List Results { get; set; } = new();
}
// Base model for response handling
public class GraphQlArrayResponse where T : class
{
public Response Response { get; set; }
}
// Make the query
public static GraphQLRequest GetPage(int pageNum) =>
new()
{
Query = @$"{{
response: characters(page: {pageNum}) {{
info {{
count
pages
next
prev
}}
results {{
id
name
image
}}
}}
}}"
};
// Handle the data
public async Task> GetPage(int pageNum)
{
var graphQlClient = new GraphQLHttpClient(Urls.RickAndMortyGraphQl, new NewtonsoftJsonSerializer());
var response =
await graphQlClient.SendQueryAsync>(CharacterQueries.GetPage(pageNum));
return response.Data.Response;
}
```
## Example of GraphQl request response
Request
```javascript
{
response: characters(page: 1) {
info {
count
pages
next
prev
}
results {
id
name
image
}
}
}
```
Response
```json
{
"data": {
"response": {
"info": {
"count": 826,
"pages": 42,
"next": 2,
"prev": null
},
"results": [
{
"id": "1",
"name": "Rick Sanchez",
"image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg"
},
{
"id": "2",
"name": "Morty Smith",
"image": "https://rickandmortyapi.com/api/character/avatar/2.jpeg"
},
{
"id": "3",
"name": "Summer Smith",
"image": "https://rickandmortyapi.com/api/character/avatar/3.jpeg"
},
{
"id": "4",
"name": "Beth Smith",
"image": "https://rickandmortyapi.com/api/character/avatar/4.jpeg"
},
{
"id": "5",
"name": "Jerry Smith",
"image": "https://rickandmortyapi.com/api/character/avatar/5.jpeg"
},
{
"id": "6",
"name": "Abadango Cluster Princess",
"image": "https://rickandmortyapi.com/api/character/avatar/6.jpeg"
},
{
"id": "7",
"name": "Abradolf Lincler",
"image": "https://rickandmortyapi.com/api/character/avatar/7.jpeg"
},
{
"id": "8",
"name": "Adjudicator Rick",
"image": "https://rickandmortyapi.com/api/character/avatar/8.jpeg"
},
{
"id": "9",
"name": "Agency Director",
"image": "https://rickandmortyapi.com/api/character/avatar/9.jpeg"
},
{
"id": "10",
"name": "Alan Rails",
"image": "https://rickandmortyapi.com/api/character/avatar/10.jpeg"
},
{
"id": "11",
"name": "Albert Einstein",
"image": "https://rickandmortyapi.com/api/character/avatar/11.jpeg"
},
{
"id": "12",
"name": "Alexander",
"image": "https://rickandmortyapi.com/api/character/avatar/12.jpeg"
},
{
"id": "13",
"name": "Alien Googah",
"image": "https://rickandmortyapi.com/api/character/avatar/13.jpeg"
},
{
"id": "14",
"name": "Alien Morty",
"image": "https://rickandmortyapi.com/api/character/avatar/14.jpeg"
},
{
"id": "15",
"name": "Alien Rick",
"image": "https://rickandmortyapi.com/api/character/avatar/15.jpeg"
},
{
"id": "16",
"name": "Amish Cyborg",
"image": "https://rickandmortyapi.com/api/character/avatar/16.jpeg"
},
{
"id": "17",
"name": "Annie",
"image": "https://rickandmortyapi.com/api/character/avatar/17.jpeg"
},
{
"id": "18",
"name": "Antenna Morty",
"image": "https://rickandmortyapi.com/api/character/avatar/18.jpeg"
},
{
"id": "19",
"name": "Antenna Rick",
"image": "https://rickandmortyapi.com/api/character/avatar/19.jpeg"
},
{
"id": "20",
"name": "Ants in my Eyes Johnson",
"image": "https://rickandmortyapi.com/api/character/avatar/20.jpeg"
}
]
}
}
}
```