Apollo client fragments not embedding data

Question

This is the first time I've ventured into fragments and I can't see where I'm screwing up, but it definitely isn't working! In GraphiQL it's working fine:

query Tasks($taskIds: [String]!) {
    tasks(taskIds: $taskIds) {
        ...taskDisplay
    }
}
fragment taskDisplay on Task {
    _id
    name
    description
    status
    children {
        _id
    }
}

Here's what's in my client app:

import { gql } from "@apollo/client";

export const TASK_FRAGMENT = gql`
    fragment taskDisplay on Task {
        _id
        name
        description
        status
        children {
            _id
        }
    }
`;

export const TASKS = gql`
    query Tasks($taskIds: [String]!) {
        tasks(taskIds: $taskIds) {
            ...taskDisplay
        }
    }
    ${TASK_FRAGMENT}
`;

So, the server returns the data correct as I can see in the Network tab of Chrome, but the data received by the useQuery result is an empty object. What gives?

Using @apollo/[email protected] (I have downgraded to 3.1.0 with same results)

EDIT:

Adding more info. My code is about as simple as it could be using a hook. Here's what's happening:

import { useQuery, gql } from "@apollo/client";
import { TASK_FRAGMENT } from "../pages/task/queries";

const ROOT_TASK_QUERY = gql`
    query Project($projectId: String!) {
        rootTask(projectId: $projectId) {
            ...taskDisplay
        }
    }
    ${TASK_FRAGMENT}
`;

const useProject = ({ variables }) => {
    return useQuery(ROOT_TASK_QUERY, {
        variables,
    });
};
export default useProject;

And this is just logging the query itself:

Answer 1

Your returned data is missing the __typename field