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 包含在您的查詢中！