ApolloError：使用了片段，但未定义

Question

我在我复杂的应用程序中有这个：

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

gql`
  fragment StuffTable on Stuff {
    id
    status
  }
`;

export const GetStuffDocument = gql`
  query GetStuff($id: ID!) {
    stuff(id: $id) {
      id
      ...StuffTable
    }
  }
`

// Then in another file:
import { ApolloClient, useApolloClient } from '@apollo/client';
import GetStuffDocument from './OtherFile';

async function exportStuff(client: ApolloClient<unknown>): Promise<void> {
  const { data: metadata } = await client.query<GetStuffQuery>({
    query: GetStuffDocument,
  });
  // other stuff, but it fails at the client.query step.
}

function MyComponent() {
  const client = useApolloClient();
  
  return <button onClick={() => exportStuff(client)}>Download</button>
}

基本上，我有一个导出按钮，它将导出我的 GraphQL 数据的 CSV。 我手动调用 client.query 以在单击按钮时获取最新数据，但它会抛出一个错误，说它找不到使用的片段StuffTable 。 如何在查询中包含该片段？

我收到此错误：

Uncaught (in promise) Error: Fragment StuffTable was used, but not defined
    at new ApolloError (index.ts:54:1)
    at QueryManager.ts:1043:1
    at both (asyncMap.ts:30:1)
    at asyncMap.ts:19:1
    at new Promise (<anonymous>)
    at Object.then (asyncMap.ts:19:1)
    at Object.next (asyncMap.ts:31:1)
    at notifySubscription (module.js:132:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.next (module.js:225:1)

如何在手动client.query中包含 Fragment 或我需要做的任何事情来解决此错误并使其正常工作？

我能做这样的事情吗？

const StuffTableFragment = gql`
  fragment StuffTable on Stuff {
    id
    status
  }
`;

// then...
const { data: metadata } = await client.query<GetStuffQuery>({
  query: GetStuffDocument,
  fragments: [StuffTableFragment],
});

我正在查看文档，但没有看到任何帮助。

Answer 1

您需要将片段导入到您的查询代码中。 而不是这个：

gql`
  fragment StuffTable on Stuff {
    id
    status
  }
`;

export const GetStuffDocument = gql`
  query GetStuff($id: ID!) {
    stuff(id: $id) {
      id
      ...StuffTable
    }
  }

你可以这样做：

const STUFF_TABLE_FRAGMENT = gql`
  fragment StuffTable on Stuff {
    id
    status
  }
`;

export const GetStuffDocument = gql`
  ${STUFF_TABLE_FRAGMENT}
  query GetStuff($id: ID!) {
    stuff(id: $id) {
      id
      ...StuffTable
    }
  }

这将确保片段 StuffTable 包含在您的查询中！