---
stage: none
group: unassigned
info: 任何拥有至少Maintainer角色的用户都可以合并对此内容的更新。详情请参阅 https://docs.gitlab.com/development/development_processes/#development-guidelines-review。
title: GraphQL
---

## 开始使用

### 有用资源

**通用资源**：

- [📚 官方GraphQL介绍](https://graphql.org/learn/)
- [📚 官方Apollo介绍](https://www.apollographql.com/tutorials/fullstack-quickstart/01-introduction)

**GitLab中的GraphQL**：

<!-- vale gitlab_base.Spelling = NO -->

- <i class="fa fa-youtube-play youtube" aria-hidden="true"></i> [GitLab未过滤的GraphQL播放列表](https://www.youtube.com/watch?v=wHPKZBDMfxE&list=PL05JrBw4t0KpcjeHjaRMB7IGB2oDWyJzv)
- <i class="fa fa-youtube-play youtube" aria-hidden="true"></i> [GitLab中的GraphQL：深度解析](../api_graphql_styleguide.md#deep-dive)（视频）由Nick Thomas制作
  - 概述GitLab中GraphQL的历史（非前端特定）
- <i class="fa fa-youtube-play youtube" aria-hidden="true"></i> [使用GraphQL和Vue Apollo实现GitLab功能演示](https://www.youtube.com/watch?v=6yYp2zB7FrM)（视频）由Natalia Tepluhina制作
  - 在GitLab中使用GraphQL实现前端功能的真实案例
- <i class="fa fa-youtube-play youtube" aria-hidden="true"></i> [GitLab客户端侧GraphQL的历史](https://www.youtube.com/watch?v=mCKRJxvMnf0)（视频）由Illya Klymov和Natalia Tepluhina制作
- <i class="fa fa-youtube-play youtube" aria-hidden="true"></i> [从Vuex到Apollo](https://www.youtube.com/watch?v=9knwu87IfU8)（视频）由Natalia Tepluhina制作
  - 概述何时Apollo可能是比Vuex更好的选择，以及如何进行过渡
- [🛠 Vuex -> Apollo迁移：一个概念验证项目](https://gitlab.com/ntepluhina/vuex-to-apollo/blob/master/README.md)
  - 展示Vue+GraphQL+(Vuex或Apollo)应用状态管理可能方法的示例集合

<!-- vale gitlab_base.Spelling = YES -->

### 库

我们在前端开发中使用[Apollo](https://www.apollographql.com/)（特别是[Apollo Client](https://www.apollographql.com/docs/react/)）和[Vue Apollo](https://github.com/vuejs/vue-apollo)来处理GraphQL。

如果您在Vue应用中使用GraphQL，[在Vue中的使用](#usage-in-vue)部分可以帮助您学习如何集成Vue Apollo。

对于其他用例，请查看[在Vue外的使用](#usage-outside-of-vue)部分。

我们使用[Immer](https://immerjs.github.io/immer/)进行不可变缓存更新；有关更多信息，请参见[不可变性及缓存更新](#immutability-and-cache-updates)。

### 工具

<!-- vale gitlab_base.Spelling = NO -->

- [Apollo Client Devtools](https://github.com/apollographql/apollo-client-devtools)

<!-- vale gitlab_base.Spelling = YES -->

#### Apollo GraphQL VS Code扩展

如果您使用VS Code，[Apollo GraphQL扩展](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo)支持`.graphql`文件中的自动补全。要设置GraphQL扩展，请按照以下步骤操作：

1. 生成schema：`bundle exec rake gitlab:graphql:schema:dump`
1. 在您的`gitlab`本地目录根目录添加一个`apollo.config.js`文件。
1. 用以下内容填充该文件：

   ```javascript
   module.exports = {
     client: {
       includes: ['./app/assets/javascripts/**/*.graphql', './ee/app/assets/javascripts/**/*.graphql'],
       service: {
         name: 'GitLab',
         localSchemaFile: './tmp/tests/graphql/gitlab_schema.graphql',
       },
     },
   };

#import "./design_list.fragment.graphql"
#import "./diff_refs.fragment.graphql"

fragment DesignItem on Design {
  ...DesignListItem
  fullPath
  diffRefs {
    ...DesignDiffRefs
  }
}

import { getIdFromGraphQLId } from '~/graphql_shared/utils';

const primaryKeyId = getIdFromGraphQLId(data.id);

query allReleases(...) {
  project(...) {
    id // Project 在 GraphQL 模式中有 ID，因此应获取它
    releases(...) {
      nodes {
        // Release 在 GraphQL 模式中没有 ID 属性
        name
        tagName
        tagPath
        assets {
          count
          links {
            nodes {
              id // Link 在 GraphQL 模式中有 ID，因此应获取它
              name
            }
          }
        }
      }
      pageInfo {
        // PageInfo 在 GraphQL 模式中没有 ID 属性
        startCursor
        hasPreviousPage
        hasNextPage
        endCursor
      }
    }
  }
}

data() {
  return {
    // 为所有apollo查询定义数据属性
    project: null,
    issues: null
  }
},
apollo: {
  project: {
    query: getProject,
    variables() {
      return {
        projectId: this.projectId
      }
    }
  },
  releaseName: {
    query: getReleaseName,
    // 如果没有这个skip，查询会先以 `projectName: null` 运行一次
    // 然后在 `getProject` 解析后，会再次运行。
    skip() {
      return !this.project?.name
    },
    variables() {
      return {
        projectName: this.project?.name
      }
    }
  }
}

#import "ee_else_ce/work_items/graphql/work_item_development.fragment.graphql"

query workItemDevelopment($id: WorkItemID!) {
  workItem(id: $id) {
    id
    iid
    namespace {
      id
    }
    widgets {
      ... on WorkItemWidgetDevelopment {
        ...WorkItemDevelopmentFragment
      }
    }
  }
}

#import "~/graphql_shared/fragments/user.fragment.graphql"

query workItemParticipants($fullPath: ID!, $iid: String!) {
  workspace: namespace(fullPath: $fullPath) {
    id
    workItem(iid: $iid) {
      id
      widgets {
        ... on WorkItemWidgetParticipants {
          type
          participants {
            nodes {
              ...User
            }
          }
        }
      }
    }
  }
}

query projectWorkItems(
  $searchTerm: String
  $fullPath: ID!
  $types: [IssueType!]
  $in: [IssuableSearchableField!]
  $iid: String = null
  $searchByIid: Boolean = false
  $searchByText: Boolean = true
) {
  workspace: project(fullPath: $fullPath) {
    id
    workItems(search: $searchTerm, types: $types, in: $in) @include(if: $searchByText) {
      nodes {
        ...
      }
    }
    workItemsByIid: workItems(iid: $iid, types: $types) @include(if: $searchByIid) {
      nodes {
        ...
      }
    }
  }
}

#import "../fragments/user.fragment.graphql"
#import "~/graphql_shared/fragments/user_availability.fragment.graphql"

query workspaceAutocompleteUsersSearch(
  $search: String!
  $fullPath: ID!
  $isProject: Boolean = true
) {
  groupWorkspace: group(fullPath: $fullPath) @skip(if: $isProject) {
    id
    users: autocompleteUsers(search: $search) {
      ...
    }
  }
  workspace: project(fullPath: $fullPath) {
    id
    users: autocompleteUsers(search: $search) {
      ...
    }
  }
}

...
const sourceData = client.readQuery({ query });

const data = produce(sourceData, draftState => {
  draftState.commits.push(newCommit);
});

client.writeQuery({
  query,
  data,
});
...

import Vue from 'vue';
import VueApollo from 'vue-apollo';
import createDefaultClient from '~/lib/graphql';
Vue.use(VueApollo);

const apolloProvider = new VueApollo({
  defaultClient: createDefaultClient(),
});

new Vue({
  ...,
  apolloProvider,
  ...
});

// user.query.graphql

query User {
  user @client {
    name
    surname
    age
  }
}

// index.js

import Vue from 'vue';
import VueApollo from 'vue-apollo';
import createDefaultClient from '~/lib/graphql';
import userQuery from '~/user/user.query.graphql'
Vue.use(VueApollo);

const defaultClient = createDefaultClient();

defaultClient.cache.writeQuery({
  query: userQuery,
  data: {
    user: {
      name: 'John',
      surname: 'Doe',
      age: 30
    },
  },
});

const apolloProvider = new VueApollo({
  defaultClient,
});

// App.vue
import userQuery from '~/user/user.query.graphql'

export default {
  apollo: {
    user: {
      query: userQuery
    }
  }
}

const defaultClient = createDefaultClient({}, {
  cacheConfig: {
    typePolicies: {
      Query: {
        fields: {
          user: {
            read(data) {
              return data || {
                user: {
                  name: 'John',
                  surname: 'Doe',
                  age: 30
                },
              }
            }
          }
        }
      }
    }
  }
});

fragment VersionListItem on DesignVersion {
  id
  sha
}

fragment VersionListItem on DesignVersion {
  id
  sha
  author @client {
    avatarUrl
    name
  }
  createdAt @client
}

// resolvers.js

const resolvers = {
  DesignVersion: {
    author: () => ({
      avatarUrl:
        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
      name: 'Administrator',
      __typename: 'User',
    }),
    createdAt: () => '2019-11-13T16:08:11Z',
  },
};

export default resolvers;

// graphql.js

import createDefaultClient from '~/lib/graphql';
import resolvers from './graphql/resolvers';

const defaultClient = createDefaultClient(resolvers);

query getAuthorData($authorNameEnabled: Boolean = false) {
  username
  name @include(if: $authorNameEnabled)
}

export default {
  apollo: {
    user: {
      query: QUERY_IMPORT,
      variables() {
        return {
          authorNameEnabled: gon?.features?.authorNameEnabled,
        };
      },
    }
  },
};

export default {
  apollo: {
    user: {
      query() {
        return this.glFeatures.authorNameEnabled ? NEW_QUERY : ORIGINAL_QUERY,
      }
    }
  },
};

export default {
  apollo: {
    user: {
      query: QUERY_IMPORT,
      skip() {
        // 仅在下拉框打开时执行查询
        return !this.isOpen;
      },
    }
  },
};

handleClick() {
  this.$apollo.addSmartQuery('user', {
    // 这里的值与你放在 `apollo` 部分中的一样
    query: QUERY_IMPORT,
  }),
};

pageInfo {
  endCursor
  hasNextPage
  hasPreviousPage
  startCursor
}

#import "~/graphql_shared/fragments/page_info.fragment.graphql"

query {
  project(fullPath: "root/my-project") {
    id
    issue(iid: "42") {
      designCollection {
        designs(atVersion: null, after: "Ihwffmde0i", first: 10) {
          edges {
            node {
              id
            }
          }
          pageInfo {
            ...PageInfo
          }
        }
      }
    }
  }
}

data() {
  return {
    pageInfo: null,
    requestCount: 0,
  }
},
apollo: {
  designs: {
    query: projectQuery,
    variables() {
      return {
        // ... 其余的设计变量
        first: 10,
      };
    },
    update(data) {
      const { id = null, issue = {} } = data.project || {};
      const { edges = [], pageInfo } = issue.designCollection?.designs || {};

      return {
        id,
        edges,
        pageInfo,
      };
    },
    result() {
      const { pageInfo } = this.designs;

      // 每次新结果增加请求计数
      this.requestCount += 1;
      // 只有当请求数量小于最大值且存在下一页时才获取下一页
      if (this.requestCount < MAX_REQUEST_COUNT && pageInfo?.hasNextPage) {
        this.fetchNextPage(pageInfo.endCursor);
      }
    },
  },
},

fetchNextPage(endCursor) {
  this.$apollo.queries.designs.fetchMore({
    variables: {
      // ... 其余的设计变量
      first: 10,
      after: endCursor,
    },
  });
}

const apolloProvider = new VueApollo({
  defaultClient: createDefaultClient(
    {},
    {
      cacheConfig: {
        typePolicies: {
          DesignCollection: {
            fields: {
              designs: {
                merge(existing, incoming) {
                  if (!incoming) return existing;
                  if (!existing) return incoming;

                  // 我们只想保存传入的节点并替换现有的节点
                  return incoming
                }
              }
            }
          }
        }
      }
    },
  ),
});

const apolloProvider = new VueApollo({
  defaultClient: createDefaultClient(
    {},
    {
      cacheConfig: {
        typePolicies: {
          DesignCollection: {
            fields: {
              designs: {
                merge(existing, incoming) {
                  if (!incoming) return existing;
                  if (!existing) return incoming;

                  const { nodes, ...rest } = incoming;
                  // 我们只需要合并 nodes 数组。
                  // 其余字段（分页信息）应始终由传入结果覆盖
                  let result = rest;
                  result.nodes = [...existing.nodes, ...nodes];
                  return result;
                }
              }
            }
          }
        }
      }
    },
  ),
});

import { concatPagination } from '@apollo/client/utilities';
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import createDefaultClient from '~/lib/graphql';

Vue.use(VueApollo);

export default new VueApollo({
  defaultClient: createDefaultClient(
    {},
    {
      cacheConfig: {
        typePolicies: {
          Project: {
            fields: {
              dastSiteProfiles: {
                keyArgs: ['fullPath'], // 你可能需要设置 keyArgs 选项以确保缓存的完整性
              },
            },
          },
          DastSiteProfileConnection: {
            fields: {
              nodes: concatPagination(),
            },
          },
        }
      }
    },
  ),
});

query searchGroupsWhereUserCanTransfer {
  currentUser {
    id
    groups(after: 'somecursor') {
      nodes {
        id
        fullName
      }
      pageInfo {
        ...PageInfo
      }
    }
  }
}

typePolicies: {
  UserCore: {
    fields: {
      groups: {
        keyArgs: false,
      },
    },
  },
  GroupConnection: {
    fields: {
      nodes: concatPagination(),
    },
  },
}

data() {
  return {
    requestCount: 0,
    isLoading: false,
    designs: {
      edges: [],
      pageInfo: null,
    },
  }
},
created() {
  this.fetchDesigns();
},
methods: {
  handleError(error) {
    this.isLoading = false;
    // 处理 `error`\n  },
  fetchDesigns(endCursor) {
    this.isLoading = true;

    return this.$apollo
      .query({
        query: projectQuery,
        variables() {
          return {
            // ... 其他设计变量\n            first: 10,
            endCursor,
          };
        },
      })
      .then(({ data }) => {
        const { id = null, issue = {} } = data.project || {};
        const { edges = [], pageInfo } = issue.designCollection?.designs || {};

        // 更新数据
        this.designs = {
          id,
          edges: [...this.designs.edges, ...edges],
          pageInfo: pageInfo,
        };

        // 每次新结果增加请求计数
        this.requestCount += 1;
        // 只有在还有更多请求且存在下一页时才获取下一页
        if (this.requestCount < MAX_REQUEST_COUNT && pageInfo?.hasNextPage) {
          this.fetchDesigns(pageInfo.endCursor);
        } else {
          this.isLoading = false;
        }
      })
      .catch(this.handleError);
  },
},

#import "~/graphql_shared/fragments/page_info.fragment.graphql"

query DastSiteProfiles($fullPath: ID!, $after: String, $before: String, $first: Int, $last: Int) {
  project(fullPath: $fullPath) {
    siteProfiles: dastSiteProfiles(after: $after, before: $before, first: $first, last: $last)
      @connection(key: "dastSiteProfiles") {
      pageInfo {
        ...PageInfo
      }
      edges {
        cursor
        node {
          id
          # ...\n        }
      }
    }
  }
}

const data = store.readQuery({
  query: dastSiteProfilesQuery,
  variables: {
    fullPath: \'namespace/project\',\n  },
});

export default {
  name: \'MyComponent\'
  apollo: {
    user: {
      query: QUERY_IMPORT,
      context: {
        batchKey: \'MyComponent\',\n      },
    }
  },
};

/* pipelines/components/graph/utils.js */

/* eslint-disable @gitlab/require-i18n-strings */
const getQueryHeaders = (etagResource) => {
  return {
    fetchOptions: {
      method: 'GET',
    },
    headers: {
      /* 这取决于你的功能 */
      'X-GITLAB-GRAPHQL-FEATURE-CORRELATION': 'verify/ci/pipeline-graph',
      'X-GITLAB-GRAPHQL-RESOURCE-ETAG': etagResource,
      'X-REQUESTED-WITH': 'XMLHttpRequest',
    },
  };
};
/* eslint-enable @gitlab/require-i18n-strings */

/* component.vue */

apollo: {
  pipeline: {
    context() {
      return getQueryHeaders(this.graphqlResourceEtag);
    },
    query: getPipelineDetails,
    pollInterval: 10000,
    ..
  },
},

# pipeline_etag.query.graphql

query getPipelineEtag {
  pipelineEtag @client
}

/* pipeline_editor/components/header/pipeline_editor_header.vue */

import getPipelineEtag from '~/ci/pipeline_editor/graphql/queries/client/pipeline_etag.query.graphql';

apollo: {
  pipelineEtag: {
    query: getPipelineEtag,
  },
  pipeline: {
    context() {
      return getQueryHeaders(this.pipelineEtag);
    },
    query: getPipelineIidQuery,
    pollInterval: PIPELINE_POLL_INTERVAL,
  },
}

/* pipeline_editor/components/commit/commit_section.vue */

await this.$apollo.mutate({
  mutation: commitCIFile,
  update(store, { data }) {
    const pipelineEtag = data?.commitCreate?.commit?.commitPipelinePath;

    if (pipelineEtag) {
      store.writeQuery({ query: getPipelineEtag, data: { pipelineEtag } });
    }
  },
});

/* component.vue */

import { toggleQueryPollingByVisibility } from '~/pipelines/components/graph/utils';

export default {
  mounted() {
    toggleQueryPollingByVisibility(this.$apollo.queries.pipeline, POLL_INTERVAL);
  },
};

mutation issueSetWeight($input: IssueSetWeightInput!) {
  issuableSetWeight: issueSetWeight(input: $input) {
    issuable: issue {
      id
      weight
    }
    errors
  }
}

bundle exec rake gitlab:graphql:schema:dump

import VueApollo from 'vue-apollo';
import Vue from 'vue';

Vue.use(VueApollo);

describe('带有 Apollo 模拟的某个组件', () => {
  let wrapper;

  function createComponent(options = {}) {
    wrapper = shallowMount(...);
  }
})

import createMockApollo from 'helpers/mock_apollo_helper';

describe('带有 Apollo 模拟的某个组件', () => {
  let wrapper;
  let mockApollo;

  function createComponent(options = {}) {
    mockApollo = createMockApollo(...)

    wrapper = shallowMount(SomeComponent, {
      apolloProvider: mockApollo
    });
  }

  afterEach(() => {
    // 我们需要确保测试之间不会残留提供者
    mockApollo = null
  })
})

import getDesignListQuery from '~/design_management/graphql/queries/get_design_list.query.graphql';
import permissionsQuery from '~/design_management/graphql/queries/design_permissions.query.graphql';
import moveDesignMutation from '~/design_management/graphql/mutations/move_design.mutation.graphql';

describe('带有 Apollo 模拟的某个组件', () => {
  let wrapper;
  let mockApollo;

  function createComponent(options = {
    designListHandler: jest.fn().mockResolvedValue(designListQueryResponse)
  }) {
    mockApollo = createMockApollo([
       [getDesignListQuery, options.designListHandler],
       [permissionsQuery, jest.fn().mockResolvedValue(permissionsQueryResponse)],
       [moveDesignMutation, jest.fn().mockResolvedValue(moveDesignMutationResponse)],
    ])

    wrapper = shallowMount(SomeComponent, {
      apolloProvider: mockApollo
    });
  }
})

const designListQueryResponse = {
  data: {
    project: {
      id: '1',
      issue: {
        id: 'issue-1',
        designCollection: {
          copyState: 'READY',
          designs: {
            nodes: [
              {
                id: '3',
                event: 'NONE',
                filename: 'fox_3.jpg',
                notesCount: 1,
                image: 'image-3',
                imageV432x230: 'image-3',
                currentUserTodos: {
                  nodes: [],
                },
              },
            ],
          },
          versions: {
            nodes: [],
          },
        },
      },
    },
  },
};

it('渲染加载状态', () => {
  const wrapper = createComponent();

  expect(wrapper.findComponent(LoadingSpinner).exists()).toBe(true)
});

it('渲染设计列表', async () => {
  const wrapper = createComponent();

  await waitForPromises()

  expect(findDesigns()).toHaveLength(3);
});

it('查询失败时显示错误', async () => {
  const wrapper = createComponent({
    designListHandler: jest.fn().mockRejectedValue('Houston, we have a problem!')
  });

  await waitForPromises()

  expect(wrapper.find('.test-error').exists()).toBe(true)
})

  const moveDesignHandlerSuccess = jest.fn().mockResolvedValue(moveDesignMutationResponse)

  function createComponent(options = {
    designListHandler: jest.fn().mockResolvedValue(designListQueryResponse),
    moveDesignHandler: moveDesignHandlerSuccess
  }) {
    mockApollo = createMockApollo([
       [getDesignListQuery, options.designListHandler],
       [permissionsQuery, jest.fn().mockResolvedValue(permissionsQueryResponse)],
       [moveDesignMutation, moveDesignHandler],
    ])

    wrapper = shallowMount(SomeComponent, {
      apolloProvider: mockApollo
    });
  }

it('使用正确参数调用变更并重新排序设计', async () => {
  const wrapper = createComponent();

  wrapper.find(VueDraggable).vm.$emit('change', {
    moved: {
      newIndex: 0,
      element: designToMove,

describe('当查询超时时', () => {
  const advanceApolloTimers = async () => {
    jest.runOnlyPendingTimers();
    await waitForPromises()
  };

  beforeEach(async () => {
    const failSucceedFail = jest
      .fn()
      .mockResolvedValueOnce({ errors: [{ message: 'timeout' }] })
      .mockResolvedValueOnce(mockPipelineResponse)
      .mockResolvedValueOnce({ errors: [{ message: 'timeout' }] });

    createComponentWithApollo(failSucceedFail);
    await waitForPromises();
  });

  it('显示正确的错误，并且在数据为空时不覆盖已填充的数据', async () => {
    /* 首次失败，显示错误，尚未有数据 */
    expect(getAlert().exists()).toBe(true);
    expect(getGraph().exists()).toBe(false);

    /* 成功，清除错误，显示图表 */
    await advanceApolloTimers();
    expect(getAlert().exists()).toBe(false);
    expect(getGraph().exists()).toBe(true);

    /* 再次失败，警报返回但数据仍保留 */
    await advanceApolloTimers();
    expect(getAlert().exists()).toBe(true);
    expect(getGraph().exists()).toBe(true);
  });
});

wrapper = mount(SomeComponent, {
  mocks: {
    // 避免！应模拟真实的 GraphQL 查询和变更，而非此方式
    $apollo: {
      mutate: jest.fn(),
      queries: {
        groups: {
          loading,
        },
      },
    },
  },
});

import waitForPromises from 'helpers/wait_for_promises';

// subscriptionMock 在我们的辅助函数中注册为订阅的处理函数
const subcriptionMock = jest.fn().mockResolvedValue(okResponse);

// ...

it('测试错误状态', () => {
  // 避免：会卡在这里！
  subscriptionMock = jest.fn().mockRejectedValue({ errors: [] });

  // 组件作为一部分调用 subscription mock
  createComponent();
  // 会永远卡住：
  // * 被拒绝的 Promise 将触发重新订阅
  // * 重新订阅将再次调用 subscriptionMock，导致被拒绝的 Promise
  // * 被拒绝的 Promise 将触发下一次重新订阅，
  await waitForPromises();
  // ...
})

it('测试失败', () => {
  // 好：订阅将仅失败一次
  subscriptionMock.mockRejectedValueOnce({ errors: [] });
  // 组件作为一部分调用 subscription mock
  createComponent();
  await waitForPromises();

  // 下面的代码现在将被执行
})

出现以下console.warn()的意外调用：
警告：mock-apollo-client - 该查询完全在客户端（使用 @client 指令），并且已配置解析器。请求处理程序不会被调用。

query getBlobContent($path: String, $ref: String!) {
  blobContent(path: $path, ref: $ref) @client {
    rawData
  }
}

import Api from '~/api';

export const resolvers = {
  Query: {
    blobContent(_, { path, ref }) {
      return {
        __typename: 'BlobContent',
        rawData: Api.getRawFile(path, { ref }).then(({ data }) => {
          return data;
        }),
      };
    },
  },
};

export default resolvers;

let mockApollo;
let mockBlobContentData; // 模拟函数，jest.fn();

const mockResolvers = {
  Query: {
    blobContent() {
      return {
        __typename: 'BlobContent',
        rawData: mockBlobContentData(), // 模拟函数可以解析模拟数据
      };
    },
  },
};

const createComponentWithApollo = ({ props = {} } = {}) => {
  mockApollo = createMockApollo([], mockResolvers); // 解析器是第二个参数

  wrapper = shallowMount(MyComponent, {
    propsData: {},
    apolloProvider: mockApollo,
    // ...
  })
};

beforeEach(() => {
  mockBlobContentData = jest.fn();
});

it('显示数据', async() => {
  mockBlobContentData.mockResolvedValue(data); // 你可以解析或拒绝来模拟结果

  createComponentWithApollo();

  await waitForPromises(); // 等待解析器模拟执行

  expect(findContent().text()).toBe(mockCiYml);
});

## 通过GraphQL启动调用提前执行初始查询

为了提升性能，有时我们希望尽早发起初始GraphQL查询。为此，可通过以下步骤将其添加到**启动调用**中：

- 将应用中所需的所有初始查询移至 `app/graphql/queries`；
- 为每个嵌套查询层级添加 `__typename` 属性：

  ```javascript
  query getPermissions($projectPath: ID!) {
    project(fullPath: $projectPath) {
      __typename
      userPermissions {
        __typename
        pushCode
        forkProject
        createMergeRequestIn
      }
    }
  }

- current_route_path = request.fullpath.match(/-\/tree\/[^\/]+\/(.+$)/).to_a[1]
- add_page_startup_graphql_call('repository/path_last_commit', { projectPath: @project.full_path, ref: current_ref, path: current_route_path || "" })
- add_page_startup_graphql_call('repository/permissions', { projectPath: @project.full_path })
- add_page_startup_graphql_call('repository/files', { nextPageCursor: "", pageSize: 100, projectPath: @project.full_path, ref: current_ref, path: current_route_path || "/"})