Error in manage Tags ( Admin Portal )

[VanshikaSabharwal]

Describe the bug
When admin logs in and clicks on Tags from side panel, he must be able to create and manage a tag, but currently the admin is not able to do so. When it clicks on manage after creating a tag then an error pops up.

To Reproduce
Steps to reproduce the behavior:

1. Go to the Admin Portal and log in
2. Go to Tags from the left sidebar
3. Create a new tag
4. Click on manage, and it will show an error.

Expected behavior
When the admin clicks on manage, he should be able to assign a tag to a user.

Actual behavior
When the admin clicks on manage, it shows error.

Screenshots

Screencast.from.2026-02-13.10-35-17.webm

Additional details
I have added the tags functionality to the Talawa admin and API. So, now this issue can be resolved; previously there was no such functionality, thus, this issue could not be resolved.

[VanshikaSabharwal]

@palisadoes assign this issue to me please.

[VanshikaSabharwal]

@palisadoes
Do we want this UI In Tags section?

Because currently we have this.

[VanshikaSabharwal]

Is there any UI for this page?

[VanshikaSabharwal]

@CodeRabbit, is there a query to find all users assigned to a tag?

[coderabbitai]

🧩 Analysis chain

@VanshikaSabharwal, let me search the codebase to find queries related to fetching users assigned to a tag.

---

🏁 Script executed:

#!/bin/bash
# Search for GraphQL query files related to tags
fd -e graphql -e ts -e tsx | xargs rg -l "tag" -i | head -20

Length of output: 839

---

🏁 Script executed:

#!/bin/bash
# Search for specific queries about getting users by tag or tag assignments
rg -n "getUsersByTag|usersAssignedToTag|taggedUsers|assignedUsers" -A 3 -B 3

Length of output: 0

---

🏁 Script executed:

#!/bin/bash
# Search for GraphQL queries that contain both "tag" and "user"
rg -n "query.*[Tt]ag" -A 10 | head -100

Length of output: 6993

---

🏁 Script executed:

#!/bin/bash
# Look for GraphQL schema files or query definitions in the GraphQL directory
fd -t f . src/GraphQl | grep -i tag

Length of output: 75

---

🏁 Script executed:

#!/bin/bash
# Search for tag-related queries and mutations
rg -n "GET.*TAG|FETCH.*TAG" -A 5

Length of output: 0

---

🏁 Script executed:

#!/bin/bash
# Read the userTagQueries.ts file to see all available queries
cat src/GraphQl/Queries/userTagQueries.ts

Length of output: 3084

---

@VanshikaSabharwal, yes! There's a query called USER_TAGS_ASSIGNED_MEMBERS in src/GraphQl/Queries/userTagQueries.ts that retrieves all users assigned to a specific tag.

Here's how to use it:

import { USER_TAGS_ASSIGNED_MEMBERS } from '@/GraphQl/Queries/userTagQueries';

// Example usage with Apollo Client
const { data } = useQuery(USER_TAGS_ASSIGNED_MEMBERS, {
  variables: {
    id: 'tagId', // The ID of the tag
    first: 10,   // Optional: number of users to fetch
    after: null, // Optional: cursor for pagination
    where: {},   // Optional: filtering criteria
    sortedBy: {} // Optional: sorting options
  }
});

// Access the users like this:
const users = data?.getAssignedUsers?.usersAssignedTo?.edges;
const totalCount = data?.getAssignedUsers?.usersAssignedTo?.totalCount;

The query returns:

• User information: _id, firstName, lastName for each assigned user
• Pagination support: pageInfo with cursors and page navigation flags
• Total count: Total number of users assigned to the tag
• Tag details: Tag name and ancestor tags

Additionally, there are two other useful queries in the same file:

1. USER_TAG_SUB_TAGS - Gets sub-tags of a tag
2. USER_TAGS_MEMBERS_TO_ASSIGN_TO - Gets users that are NOT assigned to a tag (useful for assignment UI)

[VanshikaSabharwal]

🧩 Analysis chain

@VanshikaSabharwal, yes! There's a query called USER_TAGS_ASSIGNED_MEMBERS in src/GraphQl/Queries/userTagQueries.ts that retrieves all users assigned to a specific tag.

Here's how to use it:

import { USER_TAGS_ASSIGNED_MEMBERS } from '@/GraphQl/Queries/userTagQueries';

// Example usage with Apollo Client
const { data } = useQuery(USER_TAGS_ASSIGNED_MEMBERS, {
variables: {
id: 'tagId', // The ID of the tag
first: 10, // Optional: number of users to fetch
after: null, // Optional: cursor for pagination
where: {}, // Optional: filtering criteria
sortedBy: {} // Optional: sorting options
}
});

// Access the users like this:
const users = data?.getAssignedUsers?.usersAssignedTo?.edges;
const totalCount = data?.getAssignedUsers?.usersAssignedTo?.totalCount;

The query returns:

* **User information**: `_id`, `firstName`, `lastName` for each assigned user

* **Pagination support**: `pageInfo` with cursors and page navigation flags

* **Total count**: Total number of users assigned to the tag

* **Tag details**: Tag name and ancestor tags

Additionally, there are two other useful queries in the same file:

1. `USER_TAG_SUB_TAGS` - Gets sub-tags of a tag

2. `USER_TAGS_MEMBERS_TO_ASSIGN_TO` - Gets users that are NOT assigned to a tag (useful for assignment UI)

But it is returning undefined

[VanshikaSabharwal]

🧩 Analysis chain
@VanshikaSabharwal, yes! There's a query called USER_TAGS_ASSIGNED_MEMBERS in src/GraphQl/Queries/userTagQueries.ts that retrieves all users assigned to a specific tag.
Here's how to use it:
import { USER_TAGS_ASSIGNED_MEMBERS } from '@/GraphQl/Queries/userTagQueries';
// Example usage with Apollo Client
const { data } = useQuery(USER_TAGS_ASSIGNED_MEMBERS, {
variables: {
id: 'tagId', // The ID of the tag
first: 10, // Optional: number of users to fetch
after: null, // Optional: cursor for pagination
where: {}, // Optional: filtering criteria
sortedBy: {} // Optional: sorting options
}
});
// Access the users like this:
const users = data?.getAssignedUsers?.usersAssignedTo?.edges;
const totalCount = data?.getAssignedUsers?.usersAssignedTo?.totalCount;
The query returns:

* **User information**: `_id`, `firstName`, `lastName` for each assigned user

* **Pagination support**: `pageInfo` with cursors and page navigation flags

* **Total count**: Total number of users assigned to the tag

* **Tag details**: Tag name and ancestor tags

Additionally, there are two other useful queries in the same file:

1. `USER_TAG_SUB_TAGS` - Gets sub-tags of a tag

2. `USER_TAGS_MEMBERS_TO_ASSIGN_TO` - Gets users that are NOT assigned to a tag (useful for assignment UI)

@CodeRabbit But it is returning undefined

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Read the userTagQueries.ts file to see the exact query structure
cat src/GraphQl/Queries/userTagQueries.ts

Length of output: 3084

---

🏁 Script executed:

#!/bin/bash
# Search for any existing usage of USER_TAGS_ASSIGNED_MEMBERS in the codebase
rg -n "USER_TAGS_ASSIGNED_MEMBERS" -A 5 -B 2

Length of output: 29921

---

🏁 Script executed:

#!/bin/bash
# Look for components that might be using this query or similar tag member queries
rg -n "useQuery.*getAssignedUsers|getAssignedUsers" -A 3 -B 3

Length of output: 72854

---

🏁 Script executed:

#!/bin/bash
# Check for any hook or component files that deal with tag members
fd -e tsx -e ts | xargs rg -l "AssignedMembers|assignedUsers" | head -10

Length of output: 265

---

@VanshikaSabharwal, let me help you debug this! The query returning undefined could be due to several reasons. Let me check a few things:

Common issues and solutions:

1. Check loading and error states - The query might still be loading or have an error:

const { 
  data: userTagAssignedMembersData,
  loading: userTagAssignedMembersLoading,
  error: userTagAssignedMembersError,
} = useQuery(USER_TAGS_ASSIGNED_MEMBERS, {
  variables: {
    id: 'your-tag-id', // Make sure this is a valid tag ID
    first: 10,
  }
});

// Add these checks:
console.log('Loading:', userTagAssignedMembersLoading);
console.log('Error:', userTagAssignedMembersError);
console.log('Data:', userTagAssignedMembersData);

if (userTagAssignedMembersLoading) return <div>Loading...</div>;
if (userTagAssignedMembersError) return <div>Error: {userTagAssignedMembersError.message}</div>;

2. Correct data access path - Note the query uses an alias getAssignedUsers:

// ✅ CORRECT - use the alias from the query
const users = userTagAssignedMembersData?.getAssignedUsers?.usersAssignedTo?.edges?.map(
  (edge) => edge.node
);

// ❌ WRONG - this won't work
const users = userTagAssignedMembersData?.getUserTag?.usersAssignedTo?.edges;

3. Verify tag ID exists - Make sure the id variable you're passing is valid and the tag exists in the database.

Can you share:

1. Your actual code where you're using the query?
2. What do you see when you console.log(userTagAssignedMembersData)?
3. Are there any errors in the browser console?

---

🏁 Script executed:

#!/bin/bash
# Let's see the actual implementation in ManageTag.tsx to understand the complete pattern
cat src/screens/ManageTag/ManageTag.tsx | head -200

Length of output: 7986

---

🏁 Script executed:

#!/bin/bash
# Check the interface definition to understand the expected data structure
rg -n "interface InterfaceTagAssignedMembersQuery" -A 15

Length of output: 1097

---

@VanshikaSabharwal, based on the actual implementation in ManageTag.tsx, here's how to debug this issue:

Debugging Steps

1. First, add console logs to check what's happening:

const {
  data: userTagAssignedMembersData,
  loading: userTagAssignedMembersLoading,
  error: userTagAssignedMembersError,
  refetch: userTagAssignedMembersRefetch,
} = useQuery(USER_TAGS_ASSIGNED_MEMBERS, {
  variables: {
    id: currentTagId, // ← Make sure this exists!
    first: TAGS_QUERY_DATA_CHUNK_SIZE,
    where: {
      firstName: { starts_with: '' },
      lastName: { starts_with: '' },
    },
    sortedBy: { id: 'DESCENDING' },
  },
});

// Add these debug logs:
console.log('=== DEBUG INFO ===');
console.log('1. Tag ID:', currentTagId);
console.log('2. Loading:', userTagAssignedMembersLoading);
console.log('3. Error:', userTagAssignedMembersError);
console.log('4. Data:', userTagAssignedMembersData);
console.log('5. getAssignedUsers:', userTagAssignedMembersData?.getAssignedUsers);
console.log('6. usersAssignedTo:', userTagAssignedMembersData?.getAssignedUsers?.usersAssignedTo);
console.log('==================');

2. Check for common issues:

Issue A: Tag ID is undefined

const { tagId: currentTagId } = useParams();

if (!currentTagId) {
  console.error('❌ Tag ID is undefined! Check your route parameters.');
  return <div>Error: Tag ID not found</div>;
}

Issue B: Query is still loading

if (userTagAssignedMembersLoading) {
  return <Loader />;
}

Issue C: Query returned an error

if (userTagAssignedMembersError) {
  console.error('❌ Query Error:', userTagAssignedMembersError);
  toast.error(userTagAssignedMembersError.message);
  return <div>Error loading users</div>;
}

Issue D: Backend returned null/empty data

// Check if usersAssignedTo exists
const users = userTagAssignedMembersData?.getAssignedUsers?.usersAssignedTo?.edges?.map(
  (edge) => edge.node
) ?? [];

console.log('Users array:', users);

if (users.length === 0) {
  console.log('⚠️ No users assigned to this tag yet');
}

3. Complete working example from ManageTag.tsx:

// Access the data like this:
const userTagAssignedMembers =
  userTagAssignedMembersData?.getAssignedUsers.usersAssignedTo?.edges?.map(
    (edge) => edge.node,
  ) ?? [];

const totalCount = 
  userTagAssignedMembersData?.getAssignedUsers.usersAssignedTo?.totalCount ?? 0;

const tagName = 
  userTagAssignedMembersData?.getAssignedUsers.name ?? '';

Please run the debug console.logs and tell me:

1. What is the value of currentTagId?
2. Is loading true or false?
3. Is there an error object?
4. What does the data object contain?

This will help identify exactly where the issue is! 🔍

[VanshikaSabharwal]

@CodeRabbit i don't know why i see this error. and i found that the query is not present in the schema.graphql, even thought the tag id and org id exist still i see below error.

    ApolloError2 index.ts:139
    QueryManager QueryManager.ts:1295
    both asyncMap.ts:45
    then asyncMap.ts:30
    then asyncMap.ts:30
    makeCallback asyncMap.ts:47
    notifySubscription module.js:137
    onNotify module.js:176
    error module.js:229
    iterateObserversSafely iteration.ts:17
    iterateObserversSafely iteration.ts:17
    error Concast.ts:183
    notifySubscription module.js:137
    onNotify module.js:176
    error module.js:229
    error index.ts:82
    notifySubscription module.js:137
    onNotify module.js:176
    error module.js:229
    notifySubscription module.js:137
    onNotify module.js:176
    error module.js:229
    error module.js:313
    notifySubscription module.js:137
    onNotify module.js:176
    error module.js:229
    createUploadLink createUploadLink.mjs:252
Caused by: ServerError: Response not successful: Received status code 400
    throwServerError throwServerError.ts:42
    parseJsonBody parseAndCheckHttpResponse.ts:146
    parseAndCheckHttpResponse parseAndCheckHttpResponse.ts:209````

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# First, let's find and read the schema.graphql file
fd -t f "schema.graphql" -x cat {}

Length of output: 107474

---

🏁 Script executed:

#!/bin/bash
# Search for tag-related queries in the schema
fd -t f "schema.graphql" -x rg -n "getUserTag|getAssignedUsers|tag.*User|user.*Tag" -i {}

Length of output: 474

---

🏁 Script executed:

#!/bin/bash
# Let's see all Query type definitions related to tags in the schema
fd -t f "schema.graphql" -x rg -n "type Query" -A 100 {} | grep -i tag

Length of output: 0

---

🏁 Script executed:

#!/bin/bash
# Check what the actual query name might be in the schema
fd -t f "schema.graphql" -x rg -n "usersAssignedTo|assignedUsers" -i {}

Length of output: 0

---

@VanshikaSabharwal, you've found the root cause! 🎯 The USER_TAGS_ASSIGNED_MEMBERS query doesn't exist in the backend GraphQL schema, which is why you're getting a 400 error.

The Problem

The frontend query USER_TAGS_ASSIGNED_MEMBERS is looking for a query called getAssignedUsers, but this query doesn't exist in the backend API.

The Solution

According to the schema.graphql, you should use the tag query instead, which returns a Tag object that has an assignees connection field. Here's the correct approach:

Correct Query Structure:

query GetTagWithAssignees($id: String!, $first: Int, $after: String) {
  tag(input: { id: $id }) {
    id
    name
    assignees(first: $first, after: $after) {
      edges {
        cursor
        node {
          _id
          firstName
          lastName
        }
      }
      pageInfo {
        hasNextPage
        hasPreviousPage
        startCursor
        endCursor
      }
    }
  }
}

Usage in Your Component:

import { gql, useQuery } from '@apollo/client';

const GET_TAG_WITH_ASSIGNEES = gql`
  query GetTagWithAssignees($id: String!, $first: Int, $after: String) {
    tag(input: { id: $id }) {
      id
      name
      assignees(first: $first, after: $after) {
        edges {
          cursor
          node {
            id
            name
            emailAddress
          }
        }
        pageInfo {
          hasNextPage
          endCursor
        }
      }
    }
  }
`;

// In your component:
const { data, loading, error } = useQuery(GET_TAG_WITH_ASSIGNEES, {
  variables: {
    id: tagId, // Your tag ID
    first: 10,
    after: null,
  },
});

// Access the users:
const assignedUsers = data?.tag?.assignees?.edges?.map(edge => edge.node) ?? [];

Action Required

You need to either:

1. Update the frontend query to use the correct tag query with the assignees field
2. Or work with the backend team to implement the getAssignedUsers query that the frontend expects

The mismatch between the frontend GraphQL queries file (userTagQueries.ts) and the backend schema is causing this issue. The frontend was likely built expecting a different API structure than what the backend currently provides.

[VanshikaSabharwal]

@CodeRabbit any query to know list of user where no tag is assigned?