GraphQL Client

The frontend communicates with the backend API using graphql-request paired with React Query for caching and state management.

Client Setup

The getGraphQLClient() function returns a singleton GraphQL client configured with the API endpoint. The setAuthToken() function updates the Authorization header when a user signs in or out.

The AuthContext manages the token lifecycle. When authentication succeeds, it stores the JWT and configures the client. On sign-out or token expiry, it clears the header and resets the auth state.

Operations

Queries and mutations are defined in the shared folder so both client and server can reference them. The main operations include:

Authentication: VALIDATE_TOKEN checks if the current JWT is valid on app initialization. The email and OAuth mutations handle sign-in flows.

Notifications: GET_MY_NOTIFICATIONS fetches paginated notifications, GET_MY_UNREAD_NOTIFICATIONS_COUNT returns the badge count, and mutations mark notifications as read.

See src/shared/graphql/queries.ts and src/shared/graphql/mutations.ts for all available operations.

Real-time Updates

GraphQL doesn't handle real-time updates. Instead, WebSockets push notifications directly to connected clients. When the server creates a notification, it emits a NotificationReceived message through the socket connection. The useNotifications hook listens for these messages and updates the React Query cache automatically.

Error Handling

When the server returns an UNAUTHORIZED error code, the AuthContext clears the token and prompts re-authentication. Other GraphQL errors surface through React Query's error handling.