How use fragment for both of query and mutation?

[hmz22]

I write this:

export const MEMBER_FRAGMENT = graphql(`
  fragment MemberField on Member {
    _id
    firstname
  }
`);

export const GET_MEMBER = graphql(`
  query GetMembers {
    members {
      docs {
        ...MemberField
      }
    }
  }
`);

export const ADD_MEMBER = graphql(`
  mutation AddMember($input: MemberInput!) {
    addMember(input: $input) {
     ...MemberField
    }
  }
`);

but when I use this query in page like this

import { client } from "@/services/ApolloConfig";
import React from "react";
import { GET_MEMBER } from "@/graphql/query/member.query";

type Props = {};

async function getData() {

  const res = await client.query({
    query: GET_MEMBER,
  });

  console.log(res.data);

  return res.data.members;
}

async function MembersPage({}: Props) {
  const data = await getData();

  return (
    <div>
      {data.docs.map((i) => {
        return <p key={i._id}>{i.firstname}</p>;
      })}
    </div>
  );
}

export default MembersPage;

show this error in typescript:
Property '_id' does not exist on type '{ __typename?: "Member" | undefined; } & { ' $fragmentRefs'?: { MemberFieldFragment: MemberFieldFragment; } | undefined; }'

how can fix this? I don't need to create Component for using useFragment.

this my package.json:

{
 ...
"devDependencies": {
    "@graphql-codegen/cli": "3.3.1",
    "@graphql-codegen/introspection": "3.0.1",
    "@graphql-codegen/client-preset": "3.0.1"
  }
}

[hmz22]

I find answer. just most disable fragment masking

...
  generates: {
    "src/common/graphql/types/": {
      preset: "client",
+     presetConfig: {
+       fragmentMasking: false,
+     },
      plugins: [],
    },
  },
...