- Complete project structure with Next.js frontend - GraphQL API backend with Apollo Server - Portal application with NextAuth - Crossplane Proxmox provider - GitOps configurations - CI/CD pipelines - Testing infrastructure (Vitest, Jest, Go tests) - Error handling and monitoring - Security hardening - UI component library - Documentation
110 lines
1.7 KiB
Markdown
110 lines
1.7 KiB
Markdown
# API Usage Examples
|
|
|
|
## Authentication
|
|
|
|
### Login
|
|
|
|
```javascript
|
|
const LOGIN_MUTATION = gql`
|
|
mutation Login($email: String!, $password: String!) {
|
|
login(email: $email, password: $password) {
|
|
token
|
|
user {
|
|
id
|
|
email
|
|
name
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
const { data } = await client.mutate({
|
|
mutation: LOGIN_MUTATION,
|
|
variables: {
|
|
email: 'user@example.com',
|
|
password: 'password123'
|
|
}
|
|
})
|
|
|
|
// Store token
|
|
localStorage.setItem('token', data.login.token)
|
|
```
|
|
|
|
## Resources
|
|
|
|
### Get All Resources
|
|
|
|
```javascript
|
|
const GET_RESOURCES = gql`
|
|
query GetResources {
|
|
resources {
|
|
id
|
|
name
|
|
type
|
|
status
|
|
site {
|
|
name
|
|
region
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
const { data } = await client.query({
|
|
query: GET_RESOURCES
|
|
})
|
|
```
|
|
|
|
### Create Resource
|
|
|
|
```javascript
|
|
const CREATE_RESOURCE = gql`
|
|
mutation CreateResource($input: CreateResourceInput!) {
|
|
createResource(input: $input) {
|
|
id
|
|
name
|
|
type
|
|
status
|
|
}
|
|
}
|
|
`
|
|
|
|
const { data } = await client.mutate({
|
|
mutation: CREATE_RESOURCE,
|
|
variables: {
|
|
input: {
|
|
name: 'web-server-01',
|
|
type: 'VM',
|
|
siteId: 'site-id-here',
|
|
metadata: {
|
|
cpu: 4,
|
|
memory: '8Gi'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
## Using React Hooks
|
|
|
|
```typescript
|
|
import { useResources, useCreateResource } from '@/lib/graphql/hooks'
|
|
|
|
function ResourcesList() {
|
|
const { data, loading, error } = useResources()
|
|
const { createResource } = useCreateResource()
|
|
|
|
if (loading) return <div>Loading...</div>
|
|
if (error) return <div>Error: {error.message}</div>
|
|
|
|
return (
|
|
<div>
|
|
{data?.resources.map(resource => (
|
|
<div key={resource.id}>{resource.name}</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|