Whop Developer Documentation

https://github.com/whopio/developer-documentation
Admin
This project provides comprehensive documentation for developers building applications with the Whop...
Tokens:26,586
Snippets:258
Trust Score:8.8
Update:20 hours ago
Show doc for...
Tokens:
Raw
### Run Development Proxy

Source: https://github.com/whopio/developer-documentation/blob/main/what-to-build/web-apps.mdx

Start the development proxy using pnpm.

```bash
# Run the proxy
pnpm whop-proxy
```

--------------------------------

### Example .env.local file

Source: https://github.com/whopio/developer-documentation/blob/main/apps/create-an-app.mdx

Required environment variables for the Whop SDK. WHOP_API_KEY authenticates with the Whop API; NEXT_PUBLIC_WHOP_APP_ID is the app ID. Get both from the Whop Dashboard. Do not commit the API key to a public repository.

```env
WHOP_API_KEY=YOUR_API_KEY
NEXT_PUBLIC_WHOP_APP_ID=YOUR_APP_ID
```

--------------------------------

### Customize Proxy Options

Source: https://github.com/whopio/developer-documentation/blob/main/what-to-build/web-apps.mdx

Example of running the proxy with custom port and command options.

```bash
pnpm whop-proxy --proxyPort=3000 --upstreamPort=3001 --command='echo "Hello from the proxy running on $PORT!"'
```

--------------------------------

### Install Whop SDK with npm

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/installation.mdx

Use npm to install the @whop-apps/sdk package.

```bash
npm install @whop-apps/sdk
```

--------------------------------

### Next.js Setup for createAppIframeSDK

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/iframe-setup.mdx

Next.js setup for the Whop iFrame SDK. The root layout imports a client layout that imports the SDK module, which initializes the SDK by calling createAppIframeSDK. The client layout must include the "use client" directive to ensure the SDK runs on the client.

```javascript
import { ClientLayout } from "./layout.client";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">
      <body>
        <ClientLayout>{children}</ClientLayout>
      </body>
    </html>
  );
}
```

```javascript
"use client"; // this line is important
import { FC, PropsWithChildren } from "react";
import "@/lib/iframe";

export const ClientLayout: FC<PropsWithChildren> = ({ children }) => {
  return <>{children}</>;
};
```

```javascript
import { createAppIframeSDK } from "@whop-apps/sdk";

export const WhopApp = createAppIframeSDK({
  onMessage: {},
});
```

--------------------------------

### Install @whop-apps/dev-proxy with Yarn

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/proxy.mdx

Install the proxy package using Yarn. This command is already included in the @whop-apps/sdk package, but can be run separately.

```bash
yarn add @whop-apps/dev-proxy
```

--------------------------------

### Install @whop-apps/dev-proxy with NPM

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/proxy.mdx

Install the proxy package using NPM. This command is already included in the @whop-apps/sdk package, but can be run separately.

```bash
npm install @whop-apps/dev-proxy
```

--------------------------------

### Install @whop-apps/dev-proxy with PNPM

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/proxy.mdx

Install the proxy package using PNPM. This command is already included in the @whop-apps/sdk package, but can be run separately.

```bash
pnpm add @whop-apps/dev-proxy
```

--------------------------------

### Install Whop Dependencies

Source: https://github.com/whopio/developer-documentation/blob/main/what-to-build/web-apps.mdx

Install the required Whop API and development proxy packages.

```bash
pnpm add @whop/api @whop-apps/dev-proxy
```

--------------------------------

### Navigate to app directory

Source: https://github.com/whopio/developer-documentation/blob/main/apps/create-an-app.mdx

Change into the newly created app directory before installing the Whop SDK.

```bash
cd my-new-app
```

--------------------------------

### Start local development server with whop-proxy

Source: https://github.com/whopio/developer-documentation/blob/main/apps/create-an-app.mdx

Starts the Whop SDK proxy server on port 3000. For NPM, add "whop-proxy": "whop-proxy" to the scripts section of package.json. To change the port, run with --proxyPort <port>.

```bash
yarn whop-proxy
```

```bash
npm run whop-proxy
```

```bash
pnpm whop-proxy
```

--------------------------------

### Install Whop SDK with pnpm

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/installation.mdx

Use pnpm to add the @whop-apps/sdk package to your project.

```bash
pnpm add @whop-apps/sdk
```

--------------------------------

### Run whop-proxy with NPM

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/proxy.mdx

Start the proxy using NPM. Requires adding "whop-proxy": "whop-proxy" to the scripts section of your package.json file.

```bash
npm run whop-proxy
```

--------------------------------

### Install Whop SDK with yarn

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/installation.mdx

Use yarn to add the @whop-apps/sdk package to your project.

```bash
yarn add @whop-apps/sdk
```

--------------------------------

### Define parameters for /companies/{id} endpoint

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/api.mdx

Example of the parameters object structure required for the /companies/{id} endpoint.

```json
{
params: { path: { id: "biz_XXXX" } },
}
```

--------------------------------

### Use WhopAPI app mode

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/api.mdx

Example usage of the app mode to fetch company information.

```typescript
import { WhopAPI } from "@whop-apps/sdk";

export default async function Home() {
  const companyInformation = await WhopAPI.app().GET("/app/companies/{id}", {
    params: { path: { id: "biz_XXX" } },
  });
}
```

--------------------------------

### Use WhopAPI company mode

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/api.mdx

Example usage of the company mode to fetch user information.

```typescript
import { WhopAPI } from "@whop-apps/sdk";

export default async function Home() {
  const userInformation = await WhopAPI.company().GET("/company/users/{id}", {
    params: { path: { id: "user_XXX" } },
  });
}
```

--------------------------------

### Run whop-proxy with PNPM

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/proxy.mdx

Start the proxy using PNPM. If using NPM, you need to add "whop-proxy": "whop-proxy" to the scripts section of your package.json file.

```bash
pnpm whop-proxy
```

--------------------------------

### Fetch user with Axios (JavaScript)

Source: https://github.com/whopio/developer-documentation/blob/main/oauth.mdx

Uses Axios to GET /v5/me with a Bearer token. Throws the error if the request fails.

```javascript
import axios from "axios";

const checkAccess = async (accessToken) => {
  try {
    const response = await axios.get(`https://api.whop.com/v5/me`, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });
    return response.data;
  } catch (error) {
    throw error;
  }
};

export default checkAccess;
```

--------------------------------

### Run whop-proxy with Yarn

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/proxy.mdx

Start the proxy using Yarn. If using NPM, you need to add "whop-proxy": "whop-proxy" to the scripts section of your package.json file.

```bash
yarn whop-proxy
```

--------------------------------

### Fetch user with Python requests

Source: https://github.com/whopio/developer-documentation/blob/main/oauth.mdx

Uses the requests library to GET /v5/me with a Bearer token. Returns the JSON response.

```python
import requests

def check_access(access_token):
    headers = {
        "Authorization": f"Bearer {access_token}"
    }
    response = requests.get('https://api.whop.com/v5/me', headers=headers)
    return response.json()
```

--------------------------------

### Make API Requests with Whop SDK

Source: https://github.com/whopio/developer-documentation/blob/main/what-to-build/web-apps.mdx

Examples of using the Whop SDK to fetch user profiles, list experiences, and send various types of messages.

```typescript
// Get user profile
const userProfile = await whopApi.PublicUser({
  userId: "user_id_here",
});

// List experiences
const experiences = await whopApi.ListExperiences({
  companyId: "company_id_here",
  first: 10, // Optional: limit results
  after: "cursor_here", // Optional: pagination
  accessPassId: "access_pass_id_here", // Optional: filter by access pass
  appId: "app_id_here", // Optional: filter by app
  onAccessPass: true, // Optional: only show experiences on access pass
});

// Send messages
// Direct message
await whopApi.SendDmMessage({
  toUserId: "target_user_id",
  message: "Hello!",
});

// Chat message
await whopApi.SendChatMessage({
  experienceId: "target_experience_id",
  message: "Hello everyone!",
});

// Feed message
await whopApi.SendFeedMessage({
  experienceId: "target_experience_id",
  message: "New announcement!",
});
```

--------------------------------

### Fetch user with Ruby Net::HTTP

Source: https://github.com/whopio/developer-documentation/blob/main/oauth.mdx

Uses Net::HTTP to GET /v5/me with a Bearer token. Parses the response body as JSON.

```ruby
require 'net/http'
require 'uri'
require 'json'

def check_access(access_token)
    uri = URI.parse("https://api.whop.com/v5/me")
    request = Net::HTTP::Get.new(uri)
    request["Authorization"] = "Bearer #{access_token}"
    req_options = {
        use_ssl: uri.scheme == "https",
    }
    response = Net::HTTP.start(uri.hostname, uri.port, req_options) do |http|
        http.request(request)
    end
    JSON.parse(response.body)
end
```

--------------------------------

### Python Implementation: Fetching DMs with requests

Source: https://github.com/whopio/developer-documentation/blob/main/api-reference/graphql/examples.mdx

Shows how to call the Whop GraphQL API using Python's requests library. Includes authentication headers and an example of fetching DMs. Replace placeholder values like YOUR_API_KEY, user_123, and biz_123.

```python
import requests

headers = {
    "Authorization": "Bearer YOUR_API_KEY",
    "x-on-behalf-of": "user_123",
    "x-company-id": "biz_123",
    "Content-Type": "application/json"
}

# Example: Fetching DMs
full_query = """query DmsFeedData($feedId: ID!, $postsLimit: Int!) {
    dmsFeedData(feedId: $feedId, postsLimit: $postsLimit) {
        posts {
            content
            user {
                username
                id
            }
        }
    }
}"""

payload = {
    "query": full_query,
    "variables": {
        "feedId": "your_feed_id",
        "postsLimit": 1
    }
}

response = requests.post(
    "https://api.whop.com/public-graphql",
    headers=headers,
    json=payload
)
response_json = response.json()
```

--------------------------------

### GraphQL Query: Retrieve User Data

Source: https://github.com/whopio/developer-documentation/blob/main/instructions/make-a-call.mdx

Example query to retrieve the current user's ID, username, name, and email from the Whop API.

```graphql
query myCurrentUser {
  viewer {
    user {
      id
      username
      name
      email
    }
  }
}
```

--------------------------------

### Redirect URL with code parameter

Source: https://github.com/whopio/developer-documentation/blob/main/oauth.mdx

Example of the URL your user is redirected to when accessing your application from the Whop Hub. The code parameter is used in the callback to request an authorization token.

```bash
https://your-site.xyz/callback/whop?code=xxxxxxxx
```

--------------------------------

### Check if user has access to a product

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/has-access.mdx

Use the hasAccess function to check if the user has access to a specific product. Pass in an access string and the headers object. In this example, it checks if the user owns a specific product.

```javascript
const access = await hasAccess({ to: "prod_XXXX", headers });
```

--------------------------------

### Create Next.js Project

Source: https://github.com/whopio/developer-documentation/blob/main/what-to-build/web-apps.mdx

Initialize a new Next.js project with TypeScript, Tailwind CSS, and ESLint.

```bash
pnpm create next-app my-whop-app --typescript --tailwind --eslint
cd my-whop-app
```

--------------------------------

### Configure whop-proxy command line options

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/proxy.mdx

Shows the usage and available command line options for the proxy: --proxyPort, --upstreamPort, --npmCommand, and --command, with their defaults.

```bash
Usage: yarn whop-proxy [options]

Options:

--proxyPort <port>      The port the proxy should listen on (3000 by default)
--upstreamPort <port>   The port the upstream server is listening on (set automatically by default)
--npmCommand <command>  The npm command to run to start the upstream server (dev by default)
--command <command>     The command to run to start the upstream server (npm run dev by default)
```

--------------------------------

### Create seller page directory structure

Source: https://github.com/whopio/developer-documentation/blob/main/apps/seller-page.mdx

Run these commands to create the necessary directories and the page.tsx file for the seller page at the path /seller/$companyId/$experienceId.

```bash
mkdir app/seller && mkdir "app/seller/[companyId]" && mkdir "app/seller/[companyId]/[experienceId]" && touch "app/seller/[companyId]/[experienceId]/page.tsx"
```

--------------------------------

### Next.js Implementation: Discovery Search with Apollo Client

Source: https://github.com/whopio/developer-documentation/blob/main/api-reference/graphql/examples.mdx

Configures Apollo Client with authentication headers and executes a discovery search query. Replace placeholder credentials.

```typescript
import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { gql } from "@apollo/client";

// Create HTTP link
const httpLink = createHttpLink({
  uri: "https://api.whop.com/public-graphql",
});

// Add auth headers
const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: `Bearer YOUR_API_KEY`,
      "x-on-behalf-of": "user_123",
      "x-company-id": "biz_123",
    },
  };
});

// Create Apollo Client
const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

// Example: Discovery Search
const DISCOVERY_SEARCH = gql`
  query DiscoverySearch($query: String!) {
    discoverySearch(query: $query) {
      accessPasses {
        title
        route
        headline
        logo {
          sourceUrl
        }
      }
    }
  }
`;

// Usage
client
  .query({
    query: DISCOVERY_SEARCH,
    variables: { query: "search_term" },
  })
  .then((result) => console.log(result));
```

--------------------------------

### Initialize WhopApi and fetch a public user (JavaScript)

Source: https://github.com/whopio/developer-documentation/blob/main/api-reference/graphql/authentication.mdx

Use this snippet to set up the WhopApi client with your app API key, the user ID (or agent user ID) you are acting on behalf of, and an optional company ID. It then fetches a public user by their user ID. The Python and Java versions are placeholders indicating 'Coming soon'.

```javascript
export const whopApi = WhopApi({
  appApiKey: process.env.WHOP_API_KEY ?? "fallback",
  onBehalfOfUserId: 'YOUR_USER_OR_AN_AGENT_USER',
  companyId: undefined,
});

// fetch another user

await whopApi.FetchPublicUser({ userId: winningUser })
```

```python
print('Coming soon')
```

```java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Coming soon");
    }
}
```

--------------------------------

### GraphQL Query: Retrieve Company Data

Source: https://github.com/whopio/developer-documentation/blob/main/instructions/make-a-call.mdx

Example query to retrieve the current company's ID and title from the Whop API.

```graphql
query myCurrentCompany {
  viewer {
    company {
      id
      title
    }
  }
}
```

--------------------------------

### Retrieve profile details with access token

Source: https://github.com/whopio/developer-documentation/blob/main/what-to-build/oauth-guide.mdx

GET https://api.whop.com/v5/me with the access token in the Authorization header. Returns user information as JSON.

```javascript
const checkAccess = async (accessToken) => {
  const response = await fetch("https://api.whop.com/v5/me", {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  });
  return response.json();
};
```

--------------------------------

### Create Next.js app with npm

Source: https://github.com/whopio/developer-documentation/blob/main/apps/create-an-app.mdx

Use npm to create a new Next.js application. Run this command in the directory where you want the app to be created.

```bash
npx create-next-app@latest
```

--------------------------------

### Get authorization code from callback

Source: https://github.com/whopio/developer-documentation/blob/main/what-to-build/oauth-guide.mdx

In the callback component, extract the 'code' parameter from the URL query string. This code is used to obtain an auth token.

```javascript
export default function Callback() {
  const params = new URLSearchParams(window.location.search);
  const code = params.get("code");
  // Use this code to get an auth token
}
```

--------------------------------

### Create user page directory and file

Source: https://github.com/whopio/developer-documentation/blob/main/apps/customer-page.mdx

Creates the directory structure and file for the user page at /app/user/[experienceId]/page.tsx. Run in the terminal.

```bash
mkdir app/user && mkdir "app/user/[experienceId]" && touch "app/user/[experienceId]/page.tsx"
```

--------------------------------

### GraphQL Mutation: Update User Profile

Source: https://github.com/whopio/developer-documentation/blob/main/instructions/make-a-call.mdx

Example mutation to update the current user's name to 'John Doe' using the updateUser mutation.

```graphql
mutation updateMyCurrentUser {
  updateUser(input: { name: "John Doe" }) {
    id
    name
  }
}
```

--------------------------------

### Initialize Whop API Client

Source: https://github.com/whopio/developer-documentation/blob/main/what-to-build/web-apps.mdx

Create the lib/whop-api.ts file to initialize the API client and user token verifier.

```typescript
"use server"; // ensure that this file is not imported by the client bundle

import { WhopApi, makeUserTokenVerifier } from "@whop/api";

// Initialize the Whop API client with your app's credentials
export const whopApi = WhopApi({
  // Your app's API key - required for all API calls
  appApiKey: process.env.WHOP_API_KEY ?? "fallback",

  // The user ID that will make API calls on behalf of your app
  // This is typically your app's agent user
  onBehalfOfUserId: process.env.WHOP_AGENT_USER_ID,
});

// Create a function to verify user tokens
// This is used to authenticate requests from the Whop iframe
export const verifyUserToken = makeUserTokenVerifier({
  appId: process.env.WHOP_APP_ID ?? "fallback",
  dontThrow: true, // Return null instead of throwing on invalid tokens
});
```

--------------------------------

### curl Request to Whop GraphQL API

Source: https://github.com/whopio/developer-documentation/blob/main/instructions/make-a-call.mdx

Example curl command to send a POST request to the Whop GraphQL endpoint with the required headers and a simple query.

```bash
curl -X POST https://api.whop.com/public-graphql \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "x-on-behalf-of: user_123" \
  -H "x-company-id: biz_123" \
  -H "Content-Type: application/json" \
  -d '{ "query": "query { user { id name email } }" }'
```

--------------------------------

### Use WhopAPI me mode with headers

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/api.mdx

Fetch current user information using headers from Next.js.

```javascript
import { headers } from "next/headers";

const currentUser = await WhopAPI.me({ headers }).GET("/me", {});
```

--------------------------------

### GET /me

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/api.mdx

Retrieves the current user's information using a user's access token. This endpoint is accessed through the `me` mode of the Whop API SDK.

```APIDOC
## [GET] /me

### Description
Retrieves the current user's information using a user's access token. This endpoint is accessed through the `me` mode of the Whop API SDK.

### Method
GET

### Endpoint
/me

### Parameters
#### Headers
- **Authorization** (string) - Required - The user's access token. Can be passed via the `token` parameter or the `headers` object.

### Request Example
```javascript
import { headers } from "next/headers";

const currentUser = await WhopAPI.me({ headers }).GET("/me", {});
```

### Response
#### Success Response (200)
Returns the current user's information object.

#### Response Example
```json
{
  "id": "user_XXX",
  "name": "Example User"
}
```
```

--------------------------------

### Initialize WhopAPI app mode manually

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/api.mdx

Manually pass an API key to the app mode initializer.

```javascript
await WhopAPI.app({apiKey: ""})...
```

--------------------------------

### GET /company/users/{id}

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/api.mdx

Retrieves user information using the company's API key. This endpoint is accessed through the `company` mode of the Whop API SDK.

```APIDOC
## [GET] /company/users/{id}

### Description
Retrieves user information using the company's API key. This endpoint is accessed through the `company` mode of the Whop API SDK.

### Method
GET

### Endpoint
/company/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The user ID (e.g., "user_XXX").

### Request Example
```typescript
import { WhopAPI } from "@whop-apps/sdk";

export default async function Home() {
  const userInformation = await WhopAPI.company().GET("/company/users/{id}", {
    params: { path: { id: "user_XXX" } },
  });
}
```

### Response
#### Success Response (200)
Returns the user information object.

#### Response Example
```json
{
  "id": "user_XXX",
  "name": "Example User"
}
```
```

--------------------------------

### Configure Environment Variables

Source: https://github.com/whopio/developer-documentation/blob/main/what-to-build/web-apps.mdx

Define required and optional environment variables in a .env.local file.

```env
# Required: Your app's API key from the Whop dashboard
WHOP_API_KEY=your_api_key_here

# Required: Your app's ID from the Whop dashboard
WHOP_APP_ID=your_app_id_here

# Required: The user ID of your app's agent user
# This user will make API calls on behalf of your app
WHOP_AGENT_USER_ID=your_agent_user_id

# Optional: Secret for validating webhooks
# Only needed if you're implementing webhook functionality
WHOP_WEBHOOK_SECRET=your_webhook_secret
```

--------------------------------

### GET /app/companies/{id}

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/api.mdx

Retrieves company information using the app's API key. This endpoint is accessed through the `app` mode of the Whop API SDK.

```APIDOC
## [GET] /app/companies/{id}

### Description
Retrieves company information using the app's API key. This endpoint is accessed through the `app` mode of the Whop API SDK.

### Method
GET

### Endpoint
/app/companies/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The company ID (e.g., "biz_XXX").

### Request Example
```typescript
import { WhopAPI } from "@whop-apps/sdk";

export default async function Home() {
  const companyInformation = await WhopAPI.app().GET("/app/companies/{id}", {
    params: { path: { id: "biz_XXX" } },
  });
}
```

### Response
#### Success Response (200)
Returns the company information object.

#### Response Example
```json
{
  "id": "biz_XXX",
  "name": "Example Company"
}
```
```

--------------------------------

### GraphQL Query: Get messages from a direct message feed

Source: https://github.com/whopio/developer-documentation/blob/main/api-reference/graphql/examples.mdx

Fetches posts from a direct message feed using the dmsFeedData query. Requires feedId and postsLimit variables.

```graphql
query DmsFeedData($feedId: ID!, $postsLimit: Int!) {
  dmsFeedData(feedId: $feedId, postsLimit: $postsLimit) {
    posts {
      content
      user {
        username
        id
      }
    }
  }
}
```

--------------------------------

### Initialize WhopAPI company mode manually

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/api.mdx

Manually pass a company API key to the company mode initializer.

```javascript
await WhopAPI.company({apiKey: ""})...
```

--------------------------------

### Swift Implementation: Get Current User with Apollo iOS

Source: https://github.com/whopio/developer-documentation/blob/main/api-reference/graphql/examples.mdx

Configures Apollo iOS client with authentication headers and fetches the current user. Replace placeholder credentials.

```swift
import Apollo

// Configure Apollo Client
let url = URL(string: "https://api.whop.com/public-graphql")!

let store = ApolloStore()
let transport = RequestChainNetworkTransport(
    interceptorProvider: DefaultInterceptorProvider(store: store),
    endpointURL: url,
    additionalHeaders: [
        "Authorization": "Bearer YOUR_API_KEY",
        "x-on-behalf-of": "user_123",
        "x-company-id": "biz_123"
    ]
)

let client = ApolloClient(networkTransport: transport, store: store)

// Example: Get Current User
let getCurrentUser = """
query myCurrentUser {
  viewer {
    user {
      id
      username
      name
      email
    }
  }
}
"""

client.fetch(query: getCurrentUser) { result in
    switch result {
    case .success(let graphQLResult):
        print("Success! Result: \(graphQLResult)")
    case .failure(let error):
        print("Failure! Error: \(error)")
    }
}
```

--------------------------------

### Create Next.js app with pnpm

Source: https://github.com/whopio/developer-documentation/blob/main/apps/create-an-app.mdx

Use pnpm to create a new Next.js application. Run this command in the directory where you want the app to be created.

```bash
pnpm create next-app
```

--------------------------------

### GraphQL Query: Get whops from discover

Source: https://github.com/whopio/developer-documentation/blob/main/api-reference/graphql/examples.mdx

Searches for whops using the discoverySearch query. Requires a query string and returns access passes with title, route, headline, and logo.

```graphql
query DiscoverySearch($query: String!) {
  discoverySearch(query: $query) {
    accessPasses {
      title
      route
      headline
      logo {
        sourceUrl
      }
    }
  }
}
```

--------------------------------

### Create Next.js app with yarn

Source: https://github.com/whopio/developer-documentation/blob/main/apps/create-an-app.mdx

Use yarn to create a new Next.js application. Run this command in the directory where you want the app to be created.

```bash
yarn create next-app
```

--------------------------------

### Display specific company info with WhopAPI

Source: https://github.com/whopio/developer-documentation/blob/main/apps/customer-page.mdx

Steps to display specific company info: import WhopAPI, fetch the current user with WhopAPI.me().GET("/me", {}), handle errors with user.isErr, and display the username and email.

```javascript
import { validateToken, hasAccess, WhopAPI } from "@whop-apps/sdk";
```

```javascript
const user = await WhopAPI.me({ headers }).GET("/me", {});
```

```javascript
if (user.isErr) {
  console.log(user.error.message);
  return <p>Could not fetch information about the user</p>;
}
```

```javascript
const { username, email } = user.data;

return <p>Hey {username}, welcome to your new Whop App!</p>;
```

--------------------------------

### Get redirect URL with WhopApp.getRedirectUrl

Source: https://github.com/whopio/developer-documentation/blob/main/sdk/redirect-url.mdx

Client component that calls WhopApp.getRedirectUrl with a path to generate a redirect URL for the current Whop page. Requires the iFrame SDK to be initialized and must be called from within a client component.

```javascript
"use client";
import { useCallback, useState } from "react";
import { WhopApp } from "@/lib/iframe";

export default function Home() {
  const [redirectUrl, setRedirectUrl] = useState("");

  const fetchURL = useCallback(async () => {
    const redirectUrl = await WhopApp.getRedirectUrl({
      path: "/relative/path/on/my/domain",
    });
    setRedirectUrl(redirectUrl.url);
  }, []);

  return (
    <div className="space-y-2">
      <button onClick={fetchURL}>Fetch URL</button>
      {redirectUrl && <p>Redirect URL: {redirectUrl}</p>}
    </div>
  );
}
```

--------------------------------

### mutation CreateForumPost

Source: https://github.com/whopio/developer-documentation/blob/main/api-reference/graphql/examples.mdx

Creates a forum post. Requires a CreateForumPostInput object.

```APIDOC
## mutation CreateForumPost

### Description
Creates a forum post.

### GraphQL Operation
mutation

### Mutation Name
CreateForumPost

### Variables
- **input** (CreateForumPostInput!) - Required - The input object for creating a forum post.

### Mutation Example
```graphql
mutation CreateForumPost($input: CreateForumPostInput!) {
  createForumPost(input: $input) {
    # You can specify return fields here if needed
  }
}
```
```

--------------------------------

### GraphQL Mutation: Create a forum post

Source: https://github.com/whopio/developer-documentation/blob/main/api-reference/graphql/examples.mdx

Creates a forum post using the createForumPost mutation. Requires a CreateForumPostInput object. Return fields can be specified in the mutation body.

```graphql
mutation CreateForumPost($input: CreateForumPostInput!) {
  createForumPost(input: $input) {
    # You can specify return fields here if needed
  }
}
```
Tokens:
Raw