├── .changeset └── config.json ├── .circleci └── config.yml ├── .git-blame-ignore-revs ├── .github ├── renovate.json5 └── workflows │ ├── docs.yml │ ├── issue-close-user-survey.yml │ ├── knip.yml │ ├── pkg-pr-new-publish.yml │ ├── publish.yml │ ├── relative-ci.yaml │ ├── size-limit.yml │ ├── tests.yml │ └── vercel-integration.yml ├── .gitignore ├── .gitleaksignore ├── .prettierrc ├── .size-limit.cjs ├── .yarn ├── patches │ └── react-router-npm-7.1.5-9668fa2213.patch └── releases │ └── yarn-4.9.1.cjs ├── .yarnrc.yml ├── CODEOWNERS ├── LICENSE ├── README.md ├── api-extractor.json ├── banner.jpg ├── docs ├── client-integration-nextjs.apolloclient.md ├── client-integration-nextjs.apollonextappprovider.md ├── client-integration-nextjs.debouncemultipartresponseslink._constructor_.md ├── client-integration-nextjs.debouncemultipartresponseslink.md ├── client-integration-nextjs.debouncemultipartresponseslink.request.md ├── client-integration-nextjs.inmemorycache.md ├── client-integration-nextjs.md ├── client-integration-nextjs.preloadquerycomponent.md ├── client-integration-nextjs.preloadqueryprops.children.md ├── client-integration-nextjs.preloadqueryprops.md ├── client-integration-nextjs.registerapolloclient.md ├── client-integration-nextjs.removemultipartdirectiveslink._constructor_.md ├── client-integration-nextjs.removemultipartdirectiveslink.md ├── client-integration-nextjs.removemultipartdirectiveslink.request.md ├── client-integration-nextjs.resetapolloclientsingletons.md ├── client-integration-nextjs.ssrmultipartlink._constructor_.md ├── client-integration-nextjs.ssrmultipartlink.md ├── client-integration-nextjs.transportedqueryref.md ├── client-integration-nextjs.transportedqueryref.topromise.md ├── client-integration-react-router.apolloclient._constructor_.md ├── client-integration-react-router.apolloclient.md ├── client-integration-react-router.apolloclient.setlink.md ├── client-integration-react-router.apollohydrationhelper.md ├── client-integration-react-router.createapolloloaderhandler.apolloloader.md ├── client-integration-react-router.createapolloloaderhandler.md ├── client-integration-react-router.createapolloloaderhandler.preloadqueryfn.md ├── client-integration-react-router.md ├── client-integration-tanstack-start.apolloclient.md ├── client-integration-tanstack-start.apolloclientroutercontext.apolloclient.md ├── client-integration-tanstack-start.apolloclientroutercontext.md ├── client-integration-tanstack-start.apolloclientroutercontext.preloadquery.md ├── client-integration-tanstack-start.inmemorycache.md ├── client-integration-tanstack-start.md ├── client-integration-tanstack-start.routerwithapolloclient.md ├── client-react-streaming.apolloclient.md ├── client-react-streaming.buildmanualdatatransport.md ├── client-react-streaming.createtransportedquerypreloader.md ├── client-react-streaming.datatransportcontext.md ├── client-react-streaming.datatransportproviderimplementation.md ├── client-react-streaming.debouncemultipartresponseslink._constructor_.md ├── client-react-streaming.debouncemultipartresponseslink.md ├── client-react-streaming.debouncemultipartresponseslink.request.md ├── client-react-streaming.hydrationcontextoptions.extrascriptprops.md ├── client-react-streaming.hydrationcontextoptions.md ├── client-react-streaming.inmemorycache._constructor_.md ├── client-react-streaming.inmemorycache._sourcesymbol_.md ├── client-react-streaming.inmemorycache.md ├── client-react-streaming.istransportedqueryref.md ├── client-react-streaming.md ├── client-react-streaming.preloadquerycomponent.md ├── client-react-streaming.preloadqueryprops.children.md ├── client-react-streaming.preloadqueryprops.md ├── client-react-streaming.preloadtransportedqueryfunction.md ├── client-react-streaming.preloadtransportedqueryoptions.md ├── client-react-streaming.queryevent.md ├── client-react-streaming.readfromreadablestream.md ├── client-react-streaming.readfromreadablestreamlink._constructor_.md ├── client-react-streaming.readfromreadablestreamlink.md ├── client-react-streaming.registerapolloclient.md ├── client-react-streaming.registerlateinitializingqueue.md ├── client-react-streaming.removemultipartdirectiveslink._constructor_.md ├── client-react-streaming.removemultipartdirectiveslink.md ├── client-react-streaming.removemultipartdirectiveslink.request.md ├── client-react-streaming.resetapollosingletons.md ├── client-react-streaming.resetmanualssrapollosingletons.md ├── client-react-streaming.revivetransportedqueryref.md ├── client-react-streaming.skipdatatransport.md ├── client-react-streaming.ssrmultipartlink._constructor_.md ├── client-react-streaming.ssrmultipartlink.md ├── client-react-streaming.teetoreadablestream.md ├── client-react-streaming.teetoreadablestreamlink._constructor_.md ├── client-react-streaming.teetoreadablestreamlink.md ├── client-react-streaming.transportedqueryref.md ├── client-react-streaming.transportedqueryref.topromise.md ├── client-react-streaming.usewraptransportedqueryref.md ├── client-react-streaming.wrapapolloprovider.md ├── client-react-streaming.wrappedapolloprovider.info.md ├── client-react-streaming.wrappedapolloprovider.md └── index.md ├── examples ├── README.md ├── app-dir-experiments │ ├── .eslintrc.json │ ├── .gitignore │ ├── .vscode │ │ └── settings.json │ ├── README.md │ ├── app │ │ ├── ApolloClient.ts │ │ ├── api │ │ │ └── graphql │ │ │ │ └── route.ts │ │ ├── favicon.ico │ │ ├── globals.css │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── ssr │ │ │ ├── ApolloWrapper.tsx │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ ├── components │ │ └── HtmlChangesObserver.tsx │ ├── next.config.js │ ├── package.json │ ├── public │ │ ├── next.svg │ │ ├── thirteen.svg │ │ └── vercel.svg │ └── tsconfig.json ├── hack-the-supergraph-ssr │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── app │ │ ├── ApolloWrapper.tsx │ │ ├── ClientLayout.tsx │ │ ├── error.tsx │ │ ├── layout.tsx │ │ ├── not-found.tsx │ │ ├── page.tsx │ │ └── product │ │ │ └── [id] │ │ │ └── page.tsx │ ├── components │ │ ├── Button.tsx │ │ ├── DelaySlider.tsx │ │ ├── Logo.tsx │ │ ├── Nav.tsx │ │ ├── ProductCard.tsx │ │ ├── ReviewRating.tsx │ │ ├── SettingsModal.tsx │ │ └── Spinner.tsx │ ├── logo.css │ ├── logo.svg │ ├── next.config.js │ ├── package.json │ ├── theme.js │ └── tsconfig.json └── polls-demo │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── app │ ├── cc │ │ ├── apollo-wrapper.tsx │ │ ├── error.tsx │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── poll-cc.tsx │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ ├── page.tsx │ └── rsc │ │ ├── client.ts │ │ ├── page.tsx │ │ └── poll-rsc.tsx │ ├── codegen.ts │ ├── components │ ├── answer.tsx │ ├── poll │ │ ├── documents.generated.ts │ │ ├── documents.graphql │ │ └── index.tsx │ └── types.generated.ts │ ├── next.config.js │ ├── package.json │ ├── postcss.config.js │ ├── public │ ├── next.svg │ └── vercel.svg │ ├── tailwind.config.js │ └── tsconfig.json ├── integration-test ├── .gitignore ├── jest │ ├── babel.config.js │ ├── jest.config.js │ ├── package.json │ ├── setupAfterEnv.jest.ts │ └── src │ │ ├── App.jsx │ │ ├── App.test.jsx │ │ ├── hooks.test.jsx │ │ └── schema.js ├── nextjs │ ├── .env.local │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── cc │ │ │ │ ├── ApolloWrapper.tsx │ │ │ │ ├── dynamic │ │ │ │ │ ├── layout.tsx │ │ │ │ │ ├── useBackgroundQuery │ │ │ │ │ │ └── page.tsx │ │ │ │ │ ├── useBackgroundQueryWithoutSsrReadQuery │ │ │ │ │ │ └── page.tsx │ │ │ │ │ ├── useQuery │ │ │ │ │ │ └── page.tsx │ │ │ │ │ ├── useQueryWithCache │ │ │ │ │ │ └── page.tsx │ │ │ │ │ └── useSuspenseQuery │ │ │ │ │ │ └── page.tsx │ │ │ │ └── static │ │ │ │ │ ├── layout.tsx │ │ │ │ │ ├── useBackgroundQueryWithoutSsrReadQuery │ │ │ │ │ └── page.tsx │ │ │ │ │ └── useSuspenseQuery │ │ │ │ │ └── page.tsx │ │ │ ├── graphql │ │ │ │ └── route.ts │ │ │ ├── layout.tsx │ │ │ └── rsc │ │ │ │ ├── client.ts │ │ │ │ ├── dynamic │ │ │ │ ├── PreloadQuery │ │ │ │ │ ├── defer-queryRef-useReadQuery │ │ │ │ │ │ ├── ClientChild.tsx │ │ │ │ │ │ └── page.tsx │ │ │ │ │ ├── error.tsx │ │ │ │ │ ├── queryRef-useReadQuery │ │ │ │ │ │ ├── ClientChild.tsx │ │ │ │ │ │ └── page.tsx │ │ │ │ │ └── useSuspenseQuery │ │ │ │ │ │ ├── ClientChild.tsx │ │ │ │ │ │ └── page.tsx │ │ │ │ └── query │ │ │ │ │ └── page.tsx │ │ │ │ └── static │ │ │ │ └── query │ │ │ │ └── page.tsx │ │ ├── global.d.ts │ │ └── middleware.ts │ └── tsconfig.json ├── playwright │ ├── empty.har │ ├── fixture.ts │ ├── package.json │ ├── playwright.config.ts │ ├── src │ │ ├── cc-dynamic.test.ts │ │ ├── cc-static.test.ts │ │ ├── helpers.ts │ │ ├── preloadQuery.test.ts │ │ ├── rsc-dynamic.test.ts │ │ └── rsc-static.test.ts │ └── tsconfig.json ├── react-router │ ├── .gitignore │ ├── README.md │ ├── app │ │ ├── apollo.ts │ │ ├── entry.client.tsx │ │ ├── entry.server.tsx │ │ ├── root.tsx │ │ ├── routes.ts │ │ └── routes │ │ │ ├── _index.tsx │ │ │ ├── asyncLoader.tsx │ │ │ ├── graphql.ts │ │ │ ├── preloadQuery.queryRef-useReadQuery.tsx │ │ │ └── preloadQuery.useSuspenseQuery.tsx │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── react-router.config.ts │ ├── tsconfig.json │ └── vite.config.ts ├── shared │ ├── IncrementalSchemaLink.ts │ ├── apiRoute.ts │ ├── delayLink.ts │ ├── errorLink.tsx │ ├── package.json │ ├── queries.ts │ └── schema.ts ├── tanstack-start │ ├── app.config.ts │ ├── app │ │ ├── api.ts │ │ ├── client.tsx │ │ ├── routeTree.gen.ts │ │ ├── router.tsx │ │ ├── routes │ │ │ ├── __root.tsx │ │ │ ├── api.graphql.ts │ │ │ ├── index.tsx │ │ │ ├── loader-defer.tsx │ │ │ ├── preloadQuery │ │ │ │ ├── queryRef-useReadQuery.tsx │ │ │ │ └── useSuspenseQuery.tsx │ │ │ ├── useBackgroundQuery.tsx │ │ │ ├── useBackgroundQueryWithoutSsrReadQuery.tsx │ │ │ ├── useQuery.tsx │ │ │ ├── useQueryWithCache.tsx │ │ │ ├── useSuspenseQuery-defer.tsx │ │ │ └── useSuspenseQuery.tsx │ │ └── ssr.tsx │ ├── package.json │ └── tsconfig.json ├── vite-streaming │ ├── index.html │ ├── package.json │ ├── playwright.config.ts │ ├── server.js │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── Html.jsx │ │ ├── Transport.tsx │ │ ├── entry-client.jsx │ │ ├── entry-server.jsx │ │ ├── hydration.test.ts │ │ └── schema.ts │ ├── tsconfig.json │ └── vite.config.js └── vitest │ ├── package.json │ ├── setup.js │ ├── src │ ├── App.jsx │ ├── App.test.jsx │ ├── hooks.test.jsx │ └── schema.js │ └── vite.config.js ├── knip.config.js ├── package.json ├── packages ├── .eslintignore ├── .eslintrc.cjs ├── client-react-streaming │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── api-extractor.d.ts │ ├── api-extractor.json │ ├── package-shape.json │ ├── package.json │ ├── src │ │ ├── AccumulateMultipartResponsesLink.test.ts │ │ ├── AccumulateMultipartResponsesLink.ts │ │ ├── DataTransportAbstraction │ │ │ ├── DataTransportAbstraction.ts │ │ │ ├── WrapApolloProvider.tsx │ │ │ ├── WrappedApolloClient.test.tsx │ │ │ ├── WrappedApolloClient.tsx │ │ │ ├── WrappedInMemoryCache.tsx │ │ │ ├── backpressuredCallback.ts │ │ │ ├── hooks.ts │ │ │ ├── index.ts │ │ │ ├── symbols.ts │ │ │ ├── testHelpers.ts │ │ │ ├── transportedOptions.ts │ │ │ └── useTransportValue.tsx │ │ ├── ManualDataTransport │ │ │ ├── ApolloRehydrateSymbols.tsx │ │ │ ├── ManualDataTransport.tsx │ │ │ ├── RehydrationContext.tsx │ │ │ ├── dataTransport.ts │ │ │ ├── htmlescape.ts │ │ │ ├── index.ts │ │ │ ├── lateInitializingQueue.ts │ │ │ ├── serialization.test.ts │ │ │ ├── serialization.ts │ │ │ └── types.tsx │ │ ├── PreloadQuery.tsx │ │ ├── ReadableStreamLink.tsx │ │ ├── RemoveMultipartDirectivesLink.test.ts │ │ ├── RemoveMultipartDirectivesLink.ts │ │ ├── SSRMultipartLink.ts │ │ ├── SimulatePreloadedQuery.cc.ts │ │ ├── assertInstance.ts │ │ ├── bundleInfo.ts │ │ ├── combined.ts │ │ ├── empty.ts │ │ ├── importErrors.test.tsx │ │ ├── index.cc.tsx │ │ ├── index.rsc.ts │ │ ├── index.shared.ts │ │ ├── index.ts │ │ ├── registerApolloClient.test.tsx │ │ ├── registerApolloClient.tsx │ │ ├── stream-utils │ │ │ ├── JSONTransformStreams.tsx │ │ │ ├── combined.ts │ │ │ ├── createInjectionTransformStream.test.tsx │ │ │ ├── createInjectionTransformStream.tsx │ │ │ ├── index.shared.ts │ │ │ ├── index.ssr.ts │ │ │ ├── index.ts │ │ │ └── pipeReaderToResponse.ts │ │ └── transportedQueryRef.ts │ ├── tsconfig.json │ ├── tsconfig.tests.json │ └── tsup.config.ts ├── experimental-nextjs-app-support │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── package-shape.json │ ├── package.json │ ├── redirect │ │ ├── empty.cjs │ │ ├── empty.js │ │ ├── index.cjs │ │ ├── index.d.cts │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── rsc.cjs │ │ ├── rsc.d.cts │ │ ├── rsc.d.ts │ │ ├── rsc.js │ │ ├── ssr.cjs │ │ ├── ssr.d.cts │ │ ├── ssr.d.ts │ │ └── ssr.js │ └── tsconfig.json ├── nextjs │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── api-extractor.d.ts │ ├── api-extractor.json │ ├── package-shape.json │ ├── package.json │ ├── src │ │ ├── ApolloNextAppProvider.ts │ │ ├── bundleInfo.ts │ │ ├── combined.ts │ │ ├── empty.ts │ │ ├── importErrors.test.tsx │ │ ├── index.rsc.ts │ │ ├── index.shared.ts │ │ └── index.ts │ ├── tsconfig.json │ ├── tsconfig.tests.json │ └── tsup.config.ts ├── package.json ├── react-router │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── api-extractor.json │ ├── package-shape.json │ ├── package.json │ ├── src │ │ ├── ApolloClient.tsx │ │ ├── ApolloHydrationHelper.tsx │ │ ├── importErrors.test.tsx │ │ ├── index.ts │ │ └── preloader.tsx │ ├── tsconfig.json │ ├── tsconfig.tests.json │ └── tsup.config.ts ├── tanstack-start │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── api-extractor.json │ ├── package-shape.json │ ├── package.json │ ├── src │ │ ├── ApolloProvider.tsx │ │ ├── bundleInfo.ts │ │ ├── importErrors.test.tsx │ │ ├── index.ts │ │ └── routerWithApolloClient.tsx │ ├── tsconfig.json │ ├── tsconfig.tests.json │ └── tsup.config.ts └── test-utils │ ├── console.d.ts │ ├── console.js │ ├── hydrationTest.d.ts │ ├── hydrationTest.js │ ├── package.json │ ├── react.d.ts │ ├── react.js │ ├── runInConditions.d.ts │ ├── runInConditions.js │ └── tsconfig.json ├── scripts ├── test-matrix.js ├── tsconfig.json ├── verify-package-json.mjs └── verify-package-shape.mjs ├── yarn.config.cjs └── yarn.lock /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.0.4/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [["@apollo/*"]], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [ 11 | "app-dir", 12 | "hack-the-supergraph-ssr", 13 | "apollo-next-13-demo", 14 | "packages-shared", 15 | "@integration-test/**", 16 | "@apollo/client-integration-react-router", 17 | "@apollo/client-integration-tanstack-start", 18 | "@integration-test/react-router", 19 | "@integration-test/tanstack-start" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2.1 2 | 3 | orbs: 4 | secops: apollo/circleci-secops-orb@2.0.7 5 | 6 | workflows: 7 | security-scans: 8 | jobs: 9 | - secops/gitleaks: 10 | context: 11 | - platform-docker-ro 12 | - github-orb 13 | - secops-oidc 14 | git-base-revision: <<#pipeline.git.base_revision>><><> 15 | git-revision: << pipeline.git.revision >> 16 | - secops/semgrep: 17 | context: 18 | - secops-oidc 19 | - github-orb 20 | git-base-revision: <<#pipeline.git.base_revision>><><> 21 | -------------------------------------------------------------------------------- /.git-blame-ignore-revs: -------------------------------------------------------------------------------- 1 | # format repository with prettier3 2 | 1be961c89558db25b45510d6397ce4d150280b93 -------------------------------------------------------------------------------- /.github/renovate.json5: -------------------------------------------------------------------------------- 1 | { 2 | $schema: "https://docs.renovatebot.com/renovate-schema.json", 3 | lockFileMaintenance: { 4 | enabled: false, 5 | }, 6 | ignorePaths: ["examples/**", "integration-test/**"], 7 | ignoreDeps: [ 8 | "react", 9 | "react-dom", 10 | "react-server-dom-webpack", 11 | "@apollo/experimental-nextjs-app-support", 12 | "@apollo/client-integration-nextjs", 13 | "@apollo/client-integration-tanstack-start", 14 | "@apollo/client-integration-react-router", 15 | "@apollo/client-react-streaming", 16 | "@apollo/client", 17 | ], 18 | skipInstalls: false, 19 | packageRules: [ 20 | { 21 | groupName: "all devDependencies", 22 | groupSlug: "all-dev", 23 | matchPackagePatterns: ["*"], 24 | matchDepTypes: ["devDependencies"], 25 | excludePackagePatterns: ["next"], 26 | }, 27 | { 28 | groupName: "all @types", 29 | groupSlug: "all-types", 30 | matchPackagePatterns: ["@types/*"], 31 | }, 32 | ], 33 | } 34 | -------------------------------------------------------------------------------- /.github/workflows/issue-close-user-survey.yml: -------------------------------------------------------------------------------- 1 | name: Issue Close User Survey 2 | 3 | on: 4 | issues: 5 | types: [closed] 6 | 7 | jobs: 8 | user-survey-comment: 9 | permissions: 10 | issues: write 11 | runs-on: ubuntu-latest 12 | if: github.repository == 'apollographql/apollo-client-integrations' 13 | steps: 14 | - run: | 15 | gh issue comment "$NUMBER" --body "$BODY" 16 | env: 17 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 18 | GH_REPO: ${{ github.repository }} 19 | NUMBER: ${{ github.event.issue.number }} 20 | BODY: > 21 | Do you have any feedback for the maintainers? Please tell us by taking a [one-minute survey](https://docs.google.com/forms/d/e/1FAIpQLSczNDXfJne3ZUOXjk9Ursm9JYvhTh1_nFTDfdq3XBAFWCzplQ/viewform?usp=pp_url&entry.1170701325=Apollo+Client&entry.204965213=GitHub+Issue). Your responses will help us understand Apollo Client usage and allow us to serve you better. 22 | -------------------------------------------------------------------------------- /.github/workflows/knip.yml: -------------------------------------------------------------------------------- 1 | name: Run Knip 2 | 3 | on: push 4 | 5 | jobs: 6 | lint: 7 | runs-on: ubuntu-latest 8 | name: Ubuntu/Node v20 9 | steps: 10 | - uses: actions/checkout@v4 11 | - uses: actions/setup-node@v4 12 | with: 13 | node-version: "20.x" 14 | cache: "yarn" 15 | - run: yarn install --immutable --mode=skip-build 16 | - run: yarn build:libs 17 | - run: yarn knip 18 | -------------------------------------------------------------------------------- /.github/workflows/pkg-pr-new-publish.yml: -------------------------------------------------------------------------------- 1 | name: pkg-pr-new Publish 2 | 3 | on: 4 | pull_request: 5 | push: 6 | branches: 7 | - "**" 8 | tags: 9 | - "!**" 10 | 11 | jobs: 12 | prerelease: 13 | name: pkg-pr-new Publish 14 | runs-on: ubuntu-latest 15 | steps: 16 | - name: Checkout repo 17 | uses: actions/checkout@v4 18 | 19 | - name: Setup Node.js 20.x 20 | uses: actions/setup-node@v4 21 | with: 22 | node-version: 20.x 23 | cache: yarn 24 | 25 | - name: Install dependencies 26 | run: yarn install --immutable --mode=skip-build 27 | 28 | - name: Prebuild libs 29 | run: yarn build:libs 30 | 31 | - name: Build and publish to pkg.pr.new 32 | run: yarn dlx pkg-pr-new publish --no-template packages/client-react-streaming packages/experimental-nextjs-app-support packages/nextjs packages/react-router packages/tanstack-start 33 | -------------------------------------------------------------------------------- /.github/workflows/relative-ci.yaml: -------------------------------------------------------------------------------- 1 | name: RelativeCI 2 | 3 | on: 4 | workflow_run: 5 | workflows: ["Run tests"] 6 | types: 7 | - completed 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Send bundle stats and build information to RelativeCI 14 | uses: relative-ci/agent-action@v2 15 | # if there's no artifact, we don't want to fail the build 16 | continue-on-error: true 17 | with: 18 | key: ${{ secrets.RELATIVE_CI_KEY }} 19 | token: ${{ secrets.GITHUB_TOKEN }} 20 | -------------------------------------------------------------------------------- /.github/workflows/size-limit.yml: -------------------------------------------------------------------------------- 1 | name: "Run `size-limit`" 2 | on: 3 | pull_request: 4 | branches: 5 | - main 6 | permissions: 7 | pull-requests: write 8 | jobs: 9 | size: 10 | runs-on: ubuntu-latest 11 | env: 12 | CI_JOB_NUMBER: 1 13 | steps: 14 | - uses: actions/checkout@v4 15 | - uses: actions/setup-node@v4 16 | with: 17 | node-version: "20.x" 18 | cache: "yarn" 19 | - run: yarn install --immutable --mode=skip-build 20 | - uses: andresz1/size-limit-action@v1 21 | with: 22 | build_script: build:libs 23 | github_token: ${{ secrets.GITHUB_TOKEN }} 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .yarn/* 2 | !.yarn/patches 3 | !.yarn/plugins 4 | !.yarn/releases 5 | !.yarn/sdks 6 | !.yarn/versions 7 | node_modules/ 8 | tsconfig.tsbuildinfo 9 | dist/ 10 | .yalc 11 | yalc.lock 12 | *.tgz 13 | .DS_Store 14 | .vscode/ 15 | .vercel 16 | .next/ 17 | test-results/ 18 | temp/ 19 | .built -------------------------------------------------------------------------------- /.gitleaksignore: -------------------------------------------------------------------------------- 1 | b25b92e919d2b3b3b645a65b83f31e712cc498bb:.yarn/releases/yarn-4.0.1.cjs:aws-access-token:149 2 | b25b92e919d2b3b3b645a65b83f31e712cc498bb:.yarn/releases/yarn-4.0.1.cjs:generic-api-key:567 3 | 58211dd42b666872d662aefe78bb7148fe7e6a6d:.yarn/releases/yarn-4.0.1.cjs:aws-access-token:149 4 | 58211dd42b666872d662aefe78bb7148fe7e6a6d:.yarn/releases/yarn-4.0.1.cjs:generic-api-key:567 -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/prettierrc", 3 | "bracketSpacing": true, 4 | "printWidth": 80, 5 | "semi": true, 6 | "singleQuote": false, 7 | "tabWidth": 2, 8 | "trailingComma": "es5" 9 | } 10 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: mixed 2 | 3 | enableConstraintsChecks: true 4 | 5 | enableGlobalCache: false 6 | 7 | nodeLinker: node-modules 8 | 9 | npmAuthToken: "${NODE_AUTH_TOKEN-}" 10 | 11 | yarnPath: .yarn/releases/yarn-4.9.1.cjs 12 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | # This file was automatically generated by the Apollo SecOps team 2 | # Please customize this file as needed prior to merging. 3 | 4 | * @apollographql/client-typescript 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2023 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This repository contains multiple packages. Please choose one of the following links to get to the right README: 2 | 3 | # [Apollo Client - Next.js integration](./packages/nextjs) 4 | 5 | # [Apollo Client - React Router integration](./packages/react-router) 6 | 7 | # [Apollo Client - TanStack Start integration](./packages/tanstack-start) 8 | 9 | # [Apollo Client - base package to create custom streaming SSR integrations](./packages/client-react-streaming) 10 | -------------------------------------------------------------------------------- /api-extractor.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", 3 | "projectFolder": ".", 4 | "newlineKind": "lf", 5 | "compiler": { 6 | "skipLibCheck": true 7 | }, 8 | "apiReport": { 9 | "enabled": false 10 | }, 11 | "docModel": { 12 | "enabled": true 13 | }, 14 | "dtsRollup": { 15 | "enabled": false 16 | }, 17 | "tsdocMetadata": { 18 | "enabled": false 19 | }, 20 | "messages": { 21 | "compilerMessageReporting": { 22 | "default": { 23 | "logLevel": "warning" 24 | } 25 | }, 26 | "extractorMessageReporting": { 27 | "default": { 28 | "logLevel": "warning" 29 | }, 30 | "ae-forgotten-export": { 31 | "addToApiReportFile": false, 32 | "logLevel": "none" 33 | }, 34 | "ae-internal-missing-underscore": { 35 | "addToApiReportFile": false, 36 | "logLevel": "none" 37 | }, 38 | "ae-incompatible-release-tags": { 39 | "addToApiReportFile": false, 40 | "logLevel": "none" 41 | } 42 | }, 43 | "tsdocMessageReporting": { 44 | "default": { 45 | "logLevel": "warning" 46 | }, 47 | "tsdoc-escape-greater-than": { 48 | "logLevel": "none" 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollographql/apollo-client-integrations/c465affd9e31674e868cdc7ac90cf0cab4c7f70e/banner.jpg -------------------------------------------------------------------------------- /docs/client-integration-nextjs.apolloclient.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [ApolloClient](./client-integration-nextjs.apolloclient.md) 4 | 5 | ## ApolloClient class 6 | 7 | A version of `ApolloClient` to be used with streaming SSR or in React Server Components. 8 | 9 | For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient). 10 | 11 | **Signature:** 12 | 13 | ```typescript 14 | declare class ApolloClient extends ApolloClient$1 15 | ``` 16 | **Extends:** ApolloClient$1<TCacheShape> 17 | 18 | -------------------------------------------------------------------------------- /docs/client-integration-nextjs.debouncemultipartresponseslink._constructor_.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [DebounceMultipartResponsesLink](./client-integration-nextjs.debouncemultipartresponseslink.md) > [(constructor)](./client-integration-nextjs.debouncemultipartresponseslink._constructor_.md) 4 | 5 | ## DebounceMultipartResponsesLink.(constructor) 6 | 7 | Constructs a new instance of the `AccumulateMultipartResponsesLink` class 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | constructor(config: AccumulateMultipartResponsesConfig); 13 | ``` 14 | 15 | ## Parameters 16 | 17 | 33 | 47 |
18 | 19 | Parameter 20 | 21 | 22 | 23 | 24 | Type 25 | 26 | 27 | 28 | 29 | Description 30 | 31 | 32 |
34 | 35 | config 36 | 37 | 38 | 39 | 40 | AccumulateMultipartResponsesConfig 41 | 42 | 43 | 44 | 45 | 46 |
48 | -------------------------------------------------------------------------------- /docs/client-integration-nextjs.debouncemultipartresponseslink.request.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [DebounceMultipartResponsesLink](./client-integration-nextjs.debouncemultipartresponseslink.md) > [request](./client-integration-nextjs.debouncemultipartresponseslink.request.md) 4 | 5 | ## DebounceMultipartResponsesLink.request() method 6 | 7 | **Signature:** 8 | 9 | ```typescript 10 | request(operation: Operation, forward?: NextLink): Observable, Record, Record>>; 11 | ``` 12 | 13 | ## Parameters 14 | 15 | 31 | 45 | 61 |
16 | 17 | Parameter 18 | 19 | 20 | 21 | 22 | Type 23 | 24 | 25 | 26 | 27 | Description 28 | 29 | 30 |
32 | 33 | operation 34 | 35 | 36 | 37 | 38 | Operation 39 | 40 | 41 | 42 | 43 | 44 |
46 | 47 | forward 48 | 49 | 50 | 51 | 52 | NextLink 53 | 54 | 55 | 56 | 57 | _(Optional)_ 58 | 59 | 60 |
62 | **Returns:** 63 | 64 | Observable<FetchResult<Record<string, any>, Record<string, any>, Record<string, any>>> 65 | 66 | -------------------------------------------------------------------------------- /docs/client-integration-nextjs.inmemorycache.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [InMemoryCache](./client-integration-nextjs.inmemorycache.md) 4 | 5 | ## InMemoryCache class 6 | 7 | A version of `InMemoryCache` to be used with streaming SSR. 8 | 9 | For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/cache/InMemoryCache). 10 | 11 | **Signature:** 12 | 13 | ```typescript 14 | declare class InMemoryCache extends InMemoryCache$1 15 | ``` 16 | **Extends:** InMemoryCache$1 17 | 18 | -------------------------------------------------------------------------------- /docs/client-integration-nextjs.preloadquerycomponent.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [PreloadQueryComponent](./client-integration-nextjs.preloadquerycomponent.md) 4 | 5 | ## PreloadQueryComponent interface 6 | 7 | Preloads data in React Server Components to be hydrated in Client Components. 8 | 9 | \#\#\# Example with `queryRef` `ClientChild` would call `useReadQuery` with the `queryRef`, the `Suspense` boundary is optional: 10 | 11 | ```jsx 12 | 18 | {(queryRef) => ( 19 | loading}> 20 | 21 | 22 | )} 23 | 24 | ``` 25 | \#\#\# Example for `useSuspenseQuery` `ClientChild` would call the same query with `useSuspenseQuery`, the `Suspense` boundary is optional: 26 | 27 | ```jsx 28 | 34 | loading}> 35 | 36 | 37 | 38 | ``` 39 | 40 | **Signature:** 41 | 42 | ```typescript 43 | interface PreloadQueryComponent 44 | ``` 45 | -------------------------------------------------------------------------------- /docs/client-integration-nextjs.preloadqueryprops.children.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [PreloadQueryProps](./client-integration-nextjs.preloadqueryprops.md) > [children](./client-integration-nextjs.preloadqueryprops.children.md) 4 | 5 | ## PreloadQueryProps.children property 6 | 7 | **Signature:** 8 | 9 | ```typescript 10 | children: ReactNode | ((queryRef: TransportedQueryRef, NoInfer>) => ReactNode); 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/client-integration-nextjs.preloadqueryprops.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [PreloadQueryProps](./client-integration-nextjs.preloadqueryprops.md) 4 | 5 | ## PreloadQueryProps interface 6 | 7 | Props for `PreloadQueryComponent` 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | interface PreloadQueryProps extends PreloadQueryOptions 13 | ``` 14 | **Extends:** PreloadQueryOptions<TVariables, TData> 15 | 16 | ## Properties 17 | 18 | 39 | 56 |
19 | 20 | Property 21 | 22 | 23 | 24 | 25 | Modifiers 26 | 27 | 28 | 29 | 30 | Type 31 | 32 | 33 | 34 | 35 | Description 36 | 37 | 38 |
40 | 41 | [children](./client-integration-nextjs.preloadqueryprops.children.md) 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | ReactNode \| ((queryRef: [TransportedQueryRef](./client-integration-nextjs.transportedqueryref.md)<NoInfer<TData>, NoInfer<TVariables>>) => ReactNode) 50 | 51 | 52 | 53 | 54 | 55 |
57 | -------------------------------------------------------------------------------- /docs/client-integration-nextjs.removemultipartdirectiveslink._constructor_.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [RemoveMultipartDirectivesLink](./client-integration-nextjs.removemultipartdirectiveslink.md) > [(constructor)](./client-integration-nextjs.removemultipartdirectiveslink._constructor_.md) 4 | 5 | ## RemoveMultipartDirectivesLink.(constructor) 6 | 7 | Constructs a new instance of the `RemoveMultipartDirectivesLink` class 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | constructor(config: RemoveMultipartDirectivesConfig); 13 | ``` 14 | 15 | ## Parameters 16 | 17 | 33 | 47 |
18 | 19 | Parameter 20 | 21 | 22 | 23 | 24 | Type 25 | 26 | 27 | 28 | 29 | Description 30 | 31 | 32 |
34 | 35 | config 36 | 37 | 38 | 39 | 40 | RemoveMultipartDirectivesConfig 41 | 42 | 43 | 44 | 45 | 46 |
48 | -------------------------------------------------------------------------------- /docs/client-integration-nextjs.removemultipartdirectiveslink.request.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [RemoveMultipartDirectivesLink](./client-integration-nextjs.removemultipartdirectiveslink.md) > [request](./client-integration-nextjs.removemultipartdirectiveslink.request.md) 4 | 5 | ## RemoveMultipartDirectivesLink.request() method 6 | 7 | **Signature:** 8 | 9 | ```typescript 10 | request(operation: Operation, forward?: NextLink): Observable<{}>; 11 | ``` 12 | 13 | ## Parameters 14 | 15 | 31 | 45 | 61 |
16 | 17 | Parameter 18 | 19 | 20 | 21 | 22 | Type 23 | 24 | 25 | 26 | 27 | Description 28 | 29 | 30 |
32 | 33 | operation 34 | 35 | 36 | 37 | 38 | Operation 39 | 40 | 41 | 42 | 43 | 44 |
46 | 47 | forward 48 | 49 | 50 | 51 | 52 | NextLink 53 | 54 | 55 | 56 | 57 | _(Optional)_ 58 | 59 | 60 |
62 | **Returns:** 63 | 64 | Observable<{}> 65 | 66 | -------------------------------------------------------------------------------- /docs/client-integration-nextjs.resetapolloclientsingletons.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [resetApolloClientSingletons](./client-integration-nextjs.resetapolloclientsingletons.md) 4 | 5 | ## resetApolloClientSingletons variable 6 | 7 | > This export is only available in React Client Components 8 | 9 | Resets the singleton instances created for the Apollo SSR data transport and caches. 10 | 11 | To be used in testing only, like 12 | 13 | ```ts 14 | afterEach(resetApolloClientSingletons); 15 | ``` 16 | 17 | **Signature:** 18 | 19 | ```typescript 20 | resetApolloClientSingletons: typeof resetManualSSRApolloSingletons 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/client-integration-nextjs.ssrmultipartlink._constructor_.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [SSRMultipartLink](./client-integration-nextjs.ssrmultipartlink.md) > [(constructor)](./client-integration-nextjs.ssrmultipartlink._constructor_.md) 4 | 5 | ## SSRMultipartLink.(constructor) 6 | 7 | Constructs a new instance of the `SSRMultipartLink` class 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | constructor(config?: SSRMultipartLinkConfig); 13 | ``` 14 | 15 | ## Parameters 16 | 17 | 33 | 49 |
18 | 19 | Parameter 20 | 21 | 22 | 23 | 24 | Type 25 | 26 | 27 | 28 | 29 | Description 30 | 31 | 32 |
34 | 35 | config 36 | 37 | 38 | 39 | 40 | SSRMultipartLinkConfig 41 | 42 | 43 | 44 | 45 | _(Optional)_ 46 | 47 | 48 |
50 | -------------------------------------------------------------------------------- /docs/client-integration-nextjs.transportedqueryref.topromise.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [TransportedQueryRef](./client-integration-nextjs.transportedqueryref.md) > [toPromise](./client-integration-nextjs.transportedqueryref.topromise.md) 4 | 5 | ## TransportedQueryRef.toPromise property 6 | 7 | Temporarily disabled - see https://github.com/apollographql/apollo-client-integrations/issues/332 8 | 9 | Will now be be `undefined` both in React Server Components and Client Components until we can find a better resolution. 10 | 11 | **Signature:** 12 | 13 | ```typescript 14 | toPromise?: undefined; 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/client-integration-react-router.apolloclient._constructor_.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-react-router](./client-integration-react-router.md) > [ApolloClient](./client-integration-react-router.apolloclient.md) > [(constructor)](./client-integration-react-router.apolloclient._constructor_.md) 4 | 5 | ## ApolloClient.(constructor) 6 | 7 | Constructs a new instance of the `ApolloClient` class 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | constructor(options: ConstructorParameters[0]); 13 | ``` 14 | 15 | ## Parameters 16 | 17 | 33 | 47 |
18 | 19 | Parameter 20 | 21 | 22 | 23 | 24 | Type 25 | 26 | 27 | 28 | 29 | Description 30 | 31 | 32 |
34 | 35 | options 36 | 37 | 38 | 39 | 40 | ConstructorParameters<typeof ApolloClient$1>\[0\] 41 | 42 | 43 | 44 | 45 | 46 |
48 | -------------------------------------------------------------------------------- /docs/client-integration-react-router.apolloclient.setlink.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-react-router](./client-integration-react-router.md) > [ApolloClient](./client-integration-react-router.apolloclient.md) > [setLink](./client-integration-react-router.apolloclient.setlink.md) 4 | 5 | ## ApolloClient.setLink() method 6 | 7 | **Signature:** 8 | 9 | ```typescript 10 | setLink(newLink: ApolloLink): void; 11 | ``` 12 | 13 | ## Parameters 14 | 15 | 31 | 45 |
16 | 17 | Parameter 18 | 19 | 20 | 21 | 22 | Type 23 | 24 | 25 | 26 | 27 | Description 28 | 29 | 30 |
32 | 33 | newLink 34 | 35 | 36 | 37 | 38 | ApolloLink 39 | 40 | 41 | 42 | 43 | 44 |
46 | **Returns:** 47 | 48 | void 49 | 50 | -------------------------------------------------------------------------------- /docs/client-integration-react-router.apollohydrationhelper.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-react-router](./client-integration-react-router.md) > [ApolloHydrationHelper](./client-integration-react-router.apollohydrationhelper.md) 4 | 5 | ## ApolloHydrationHelper() function 6 | 7 | > This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. 8 | > 9 | 10 | 11 | **Signature:** 12 | 13 | ```typescript 14 | declare function ApolloHydrationHelper(props: { 15 | children: React.ReactNode; 16 | }): React.ReactNode; 17 | ``` 18 | 19 | ## Parameters 20 | 21 | 37 | 51 |
22 | 23 | Parameter 24 | 25 | 26 | 27 | 28 | Type 29 | 30 | 31 | 32 | 33 | Description 34 | 35 | 36 |
38 | 39 | props 40 | 41 | 42 | 43 | 44 | { children: React.ReactNode; } 45 | 46 | 47 | 48 | 49 | 50 |
52 | **Returns:** 53 | 54 | React.ReactNode 55 | 56 | -------------------------------------------------------------------------------- /docs/client-integration-react-router.createapolloloaderhandler.apolloloader.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-react-router](./client-integration-react-router.md) > [createApolloLoaderHandler](./client-integration-react-router.createapolloloaderhandler.md) > [ApolloLoader](./client-integration-react-router.createapolloloaderhandler.apolloloader.md) 4 | 5 | ## createApolloLoaderHandler.ApolloLoader type 6 | 7 | > This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. 8 | > 9 | 10 | **Signature:** 11 | 12 | ```typescript 13 | type ApolloLoader = >() => (loader: (args: LoaderArgs & { 14 | preloadQuery: PreloadQueryFn; 15 | }) => ReturnValue) => (args: LoaderArgs) => ReturnValue; 16 | ``` 17 | **References:** [PreloadQueryFn](./client-integration-react-router.createapolloloaderhandler.preloadqueryfn.md) 18 | 19 | -------------------------------------------------------------------------------- /docs/client-integration-react-router.createapolloloaderhandler.preloadqueryfn.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-react-router](./client-integration-react-router.md) > [createApolloLoaderHandler](./client-integration-react-router.createapolloloaderhandler.md) > [PreloadQueryFn](./client-integration-react-router.createapolloloaderhandler.preloadqueryfn.md) 4 | 5 | ## createApolloLoaderHandler.PreloadQueryFn interface 6 | 7 | > This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. 8 | > 9 | 10 | **Signature:** 11 | 12 | ```typescript 13 | interface PreloadQueryFn 14 | ``` 15 | -------------------------------------------------------------------------------- /docs/client-integration-tanstack-start.apolloclient.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-tanstack-start](./client-integration-tanstack-start.md) > [ApolloClient](./client-integration-tanstack-start.apolloclient.md) 4 | 5 | ## ApolloClient class 6 | 7 | A version of `ApolloClient` to be used with TanStack Start. 8 | 9 | For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient). 10 | 11 | **Signature:** 12 | 13 | ```typescript 14 | declare class ApolloClient extends ApolloClient$1 15 | ``` 16 | **Extends:** ApolloClient$1<TCacheShape> 17 | 18 | -------------------------------------------------------------------------------- /docs/client-integration-tanstack-start.apolloclientroutercontext.apolloclient.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-tanstack-start](./client-integration-tanstack-start.md) > [ApolloClientRouterContext](./client-integration-tanstack-start.apolloclientroutercontext.md) > [apolloClient](./client-integration-tanstack-start.apolloclientroutercontext.apolloclient.md) 4 | 5 | ## ApolloClientRouterContext.apolloClient property 6 | 7 | > This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. 8 | > 9 | 10 | **Signature:** 11 | 12 | ```typescript 13 | apolloClient: ApolloClient$1; 14 | ``` 15 | -------------------------------------------------------------------------------- /docs/client-integration-tanstack-start.apolloclientroutercontext.preloadquery.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-tanstack-start](./client-integration-tanstack-start.md) > [ApolloClientRouterContext](./client-integration-tanstack-start.apolloclientroutercontext.md) > [preloadQuery](./client-integration-tanstack-start.apolloclientroutercontext.preloadquery.md) 4 | 5 | ## ApolloClientRouterContext.preloadQuery property 6 | 7 | > This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. 8 | > 9 | 10 | **Signature:** 11 | 12 | ```typescript 13 | preloadQuery: PreloadQueryFunction; 14 | ``` 15 | -------------------------------------------------------------------------------- /docs/client-integration-tanstack-start.inmemorycache.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-integration-tanstack-start](./client-integration-tanstack-start.md) > [InMemoryCache](./client-integration-tanstack-start.inmemorycache.md) 4 | 5 | ## InMemoryCache class 6 | 7 | A version of `InMemoryCache` to be used with TanStack Start. 8 | 9 | For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/cache/InMemoryCache). 10 | 11 | **Signature:** 12 | 13 | ```typescript 14 | declare class InMemoryCache extends InMemoryCache$1 15 | ``` 16 | **Extends:** InMemoryCache$1 17 | 18 | -------------------------------------------------------------------------------- /docs/client-react-streaming.apolloclient.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [ApolloClient](./client-react-streaming.apolloclient.md) 4 | 5 | ## ApolloClient class 6 | 7 | A version of `ApolloClient` to be used with streaming SSR or in React Server Components. 8 | 9 | For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient). 10 | 11 | **Signature:** 12 | 13 | ```typescript 14 | declare class ApolloClient extends ApolloClient_base implements Partial 15 | ``` 16 | **Extends:** ApolloClient\_base 17 | 18 | **Implements:** Partial<ApolloClientSSRImpl> 19 | 20 | -------------------------------------------------------------------------------- /docs/client-react-streaming.createtransportedquerypreloader.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [createTransportedQueryPreloader](./client-react-streaming.createtransportedquerypreloader.md) 4 | 5 | ## createTransportedQueryPreloader() function 6 | 7 | 8 | **Signature:** 9 | 10 | ```typescript 11 | declare function createTransportedQueryPreloader(client: ApolloClient$1): PreloadTransportedQueryFunction; 12 | ``` 13 | 14 | ## Parameters 15 | 16 | 32 | 46 |
17 | 18 | Parameter 19 | 20 | 21 | 22 | 23 | Type 24 | 25 | 26 | 27 | 28 | Description 29 | 30 | 31 |
33 | 34 | client 35 | 36 | 37 | 38 | 39 | ApolloClient$1<any> 40 | 41 | 42 | 43 | 44 | 45 |
47 | **Returns:** 48 | 49 | [PreloadTransportedQueryFunction](./client-react-streaming.preloadtransportedqueryfunction.md) 50 | 51 | -------------------------------------------------------------------------------- /docs/client-react-streaming.datatransportcontext.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [DataTransportContext](./client-react-streaming.datatransportcontext.md) 4 | 5 | ## DataTransportContext variable 6 | 7 | > This export is only available in React Client Components 8 | 9 | If you create a custom data transport, you need to wrap the child tree in a `DataTransportContext.Provider` and provide the `DataTransportAbstraction` to it. 10 | 11 | See for example https://github.com/apollographql/apollo-client-integrations/blob/37feeaa9aea69b90a974eb9cd0fbd636b62d841a/integration-test/experimental-react/src/WrappedApolloProvider.tsx 12 | 13 | **Signature:** 14 | 15 | ```typescript 16 | DataTransportContext: React.Context 17 | ``` 18 | -------------------------------------------------------------------------------- /docs/client-react-streaming.debouncemultipartresponseslink._constructor_.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [DebounceMultipartResponsesLink](./client-react-streaming.debouncemultipartresponseslink.md) > [(constructor)](./client-react-streaming.debouncemultipartresponseslink._constructor_.md) 4 | 5 | ## DebounceMultipartResponsesLink.(constructor) 6 | 7 | Constructs a new instance of the `AccumulateMultipartResponsesLink` class 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | constructor(config: AccumulateMultipartResponsesConfig); 13 | ``` 14 | 15 | ## Parameters 16 | 17 | 33 | 47 |
18 | 19 | Parameter 20 | 21 | 22 | 23 | 24 | Type 25 | 26 | 27 | 28 | 29 | Description 30 | 31 | 32 |
34 | 35 | config 36 | 37 | 38 | 39 | 40 | AccumulateMultipartResponsesConfig 41 | 42 | 43 | 44 | 45 | 46 |
48 | -------------------------------------------------------------------------------- /docs/client-react-streaming.debouncemultipartresponseslink.request.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [DebounceMultipartResponsesLink](./client-react-streaming.debouncemultipartresponseslink.md) > [request](./client-react-streaming.debouncemultipartresponseslink.request.md) 4 | 5 | ## DebounceMultipartResponsesLink.request() method 6 | 7 | **Signature:** 8 | 9 | ```typescript 10 | request(operation: Operation, forward?: NextLink): Observable, Record, Record>>; 11 | ``` 12 | 13 | ## Parameters 14 | 15 | 31 | 45 | 61 |
16 | 17 | Parameter 18 | 19 | 20 | 21 | 22 | Type 23 | 24 | 25 | 26 | 27 | Description 28 | 29 | 30 |
32 | 33 | operation 34 | 35 | 36 | 37 | 38 | Operation 39 | 40 | 41 | 42 | 43 | 44 |
46 | 47 | forward 48 | 49 | 50 | 51 | 52 | NextLink 53 | 54 | 55 | 56 | 57 | _(Optional)_ 58 | 59 | 60 |
62 | **Returns:** 63 | 64 | Observable<FetchResult<Record<string, any>, Record<string, any>, Record<string, any>>> 65 | 66 | -------------------------------------------------------------------------------- /docs/client-react-streaming.hydrationcontextoptions.extrascriptprops.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [HydrationContextOptions](./client-react-streaming.hydrationcontextoptions.md) > [extraScriptProps](./client-react-streaming.hydrationcontextoptions.extrascriptprops.md) 4 | 5 | ## HydrationContextOptions.extraScriptProps property 6 | 7 | Props that will be passed down to `script` tags that will be used to transport data to the browser. Can e.g. be used to add a `nonce`. 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | extraScriptProps?: ScriptProps; 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/client-react-streaming.hydrationcontextoptions.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [HydrationContextOptions](./client-react-streaming.hydrationcontextoptions.md) 4 | 5 | ## HydrationContextOptions interface 6 | 7 | 8 | **Signature:** 9 | 10 | ```typescript 11 | interface HydrationContextOptions 12 | ``` 13 | 14 | ## Properties 15 | 16 | 37 | 56 |
17 | 18 | Property 19 | 20 | 21 | 22 | 23 | Modifiers 24 | 25 | 26 | 27 | 28 | Type 29 | 30 | 31 | 32 | 33 | Description 34 | 35 | 36 |
38 | 39 | [extraScriptProps?](./client-react-streaming.hydrationcontextoptions.extrascriptprops.md) 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | ScriptProps 48 | 49 | 50 | 51 | 52 | _(Optional)_ Props that will be passed down to `script` tags that will be used to transport data to the browser. Can e.g. be used to add a `nonce`. 53 | 54 | 55 |
57 | -------------------------------------------------------------------------------- /docs/client-react-streaming.inmemorycache._constructor_.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [InMemoryCache](./client-react-streaming.inmemorycache.md) > [(constructor)](./client-react-streaming.inmemorycache._constructor_.md) 4 | 5 | ## InMemoryCache.(constructor) 6 | 7 | Constructs a new instance of the `InMemoryCache` class 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | constructor(config?: InMemoryCacheConfig | undefined); 13 | ``` 14 | 15 | ## Parameters 16 | 17 | 33 | 49 |
18 | 19 | Parameter 20 | 21 | 22 | 23 | 24 | Type 25 | 26 | 27 | 28 | 29 | Description 30 | 31 | 32 |
34 | 35 | config 36 | 37 | 38 | 39 | 40 | InMemoryCacheConfig \| undefined 41 | 42 | 43 | 44 | 45 | _(Optional)_ 46 | 47 | 48 |
50 | -------------------------------------------------------------------------------- /docs/client-react-streaming.inmemorycache._sourcesymbol_.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [InMemoryCache](./client-react-streaming.inmemorycache.md) > [\[sourceSymbol\]](./client-react-streaming.inmemorycache._sourcesymbol_.md) 4 | 5 | ## InMemoryCache.\[sourceSymbol\] property 6 | 7 | **Signature:** 8 | 9 | ```typescript 10 | [sourceSymbol]: string; 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/client-react-streaming.istransportedqueryref.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [isTransportedQueryRef](./client-react-streaming.istransportedqueryref.md) 4 | 5 | ## isTransportedQueryRef() function 6 | 7 | 8 | **Signature:** 9 | 10 | ```typescript 11 | declare function isTransportedQueryRef(queryRef: any): queryRef is TransportedQueryRef; 12 | ``` 13 | 14 | ## Parameters 15 | 16 | 32 | 46 |
17 | 18 | Parameter 19 | 20 | 21 | 22 | 23 | Type 24 | 25 | 26 | 27 | 28 | Description 29 | 30 | 31 |
33 | 34 | queryRef 35 | 36 | 37 | 38 | 39 | any 40 | 41 | 42 | 43 | 44 | 45 |
47 | **Returns:** 48 | 49 | queryRef is [TransportedQueryRef](./client-react-streaming.transportedqueryref.md) 50 | 51 | -------------------------------------------------------------------------------- /docs/client-react-streaming.preloadquerycomponent.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [PreloadQueryComponent](./client-react-streaming.preloadquerycomponent.md) 4 | 5 | ## PreloadQueryComponent interface 6 | 7 | Preloads data in React Server Components to be hydrated in Client Components. 8 | 9 | \#\#\# Example with `queryRef` `ClientChild` would call `useReadQuery` with the `queryRef`, the `Suspense` boundary is optional: 10 | 11 | ```jsx 12 | 18 | {(queryRef) => ( 19 | loading}> 20 | 21 | 22 | )} 23 | 24 | ``` 25 | \#\#\# Example for `useSuspenseQuery` `ClientChild` would call the same query with `useSuspenseQuery`, the `Suspense` boundary is optional: 26 | 27 | ```jsx 28 | 34 | loading}> 35 | 36 | 37 | 38 | ``` 39 | 40 | **Signature:** 41 | 42 | ```typescript 43 | interface PreloadQueryComponent 44 | ``` 45 | -------------------------------------------------------------------------------- /docs/client-react-streaming.preloadqueryprops.children.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [PreloadQueryProps](./client-react-streaming.preloadqueryprops.md) > [children](./client-react-streaming.preloadqueryprops.children.md) 4 | 5 | ## PreloadQueryProps.children property 6 | 7 | **Signature:** 8 | 9 | ```typescript 10 | children: ReactNode | ((queryRef: TransportedQueryRef, NoInfer>) => ReactNode); 11 | ``` 12 | -------------------------------------------------------------------------------- /docs/client-react-streaming.preloadqueryprops.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [PreloadQueryProps](./client-react-streaming.preloadqueryprops.md) 4 | 5 | ## PreloadQueryProps interface 6 | 7 | Props for `PreloadQueryComponent` 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | interface PreloadQueryProps extends PreloadQueryOptions 13 | ``` 14 | **Extends:** PreloadQueryOptions<TVariables, TData> 15 | 16 | ## Properties 17 | 18 | 39 | 56 |
19 | 20 | Property 21 | 22 | 23 | 24 | 25 | Modifiers 26 | 27 | 28 | 29 | 30 | Type 31 | 32 | 33 | 34 | 35 | Description 36 | 37 | 38 |
40 | 41 | [children](./client-react-streaming.preloadqueryprops.children.md) 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | ReactNode \| ((queryRef: [TransportedQueryRef](./client-react-streaming.transportedqueryref.md)<NoInfer<TData>, NoInfer<TVariables>>) => ReactNode) 50 | 51 | 52 | 53 | 54 | 55 |
57 | -------------------------------------------------------------------------------- /docs/client-react-streaming.preloadtransportedqueryfunction.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [PreloadTransportedQueryFunction](./client-react-streaming.preloadtransportedqueryfunction.md) 4 | 5 | ## PreloadTransportedQueryFunction interface 6 | 7 | 8 | **Signature:** 9 | 10 | ```typescript 11 | interface PreloadTransportedQueryFunction 12 | ``` 13 | -------------------------------------------------------------------------------- /docs/client-react-streaming.preloadtransportedqueryoptions.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [PreloadTransportedQueryOptions](./client-react-streaming.preloadtransportedqueryoptions.md) 4 | 5 | ## PreloadTransportedQueryOptions type 6 | 7 | 8 | **Signature:** 9 | 10 | ```typescript 11 | type PreloadTransportedQueryOptions = Omit, "query"> & RestrictedPreloadOptions; 12 | ``` 13 | -------------------------------------------------------------------------------- /docs/client-react-streaming.queryevent.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [QueryEvent](./client-react-streaming.queryevent.md) 4 | 5 | ## QueryEvent type 6 | 7 | Events that will be emitted by a wrapped ApolloClient instance during SSR on `DataTransportProviderImplementation.registerDispatchRequestStarted`, to be transported to the browser and replayed there using `DataTransportProviderImplementation.onQueryEvent`. 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | type QueryEvent = { 13 | type: "started"; 14 | options: TransportedOptions; 15 | id: TransportIdentifier; 16 | } | (ReadableStreamLinkEvent & { 17 | id: TransportIdentifier; 18 | }); 19 | ``` 20 | -------------------------------------------------------------------------------- /docs/client-react-streaming.readfromreadablestream.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [readFromReadableStream](./client-react-streaming.readfromreadablestream.md) 4 | 5 | ## readFromReadableStream() function 6 | 7 | Apply to a context that will be passed to a link chain containing `ReadFromReadableStreamLink`. 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | declare function readFromReadableStream>(readableStream: ReadableStream, context: T): T & InternalContext$1; 13 | ``` 14 | 15 | ## Parameters 16 | 17 | 33 | 47 | 61 |
18 | 19 | Parameter 20 | 21 | 22 | 23 | 24 | Type 25 | 26 | 27 | 28 | 29 | Description 30 | 31 | 32 |
34 | 35 | readableStream 36 | 37 | 38 | 39 | 40 | ReadableStream<ReadableStreamLinkEvent> 41 | 42 | 43 | 44 | 45 | 46 |
48 | 49 | context 50 | 51 | 52 | 53 | 54 | T 55 | 56 | 57 | 58 | 59 | 60 |
62 | **Returns:** 63 | 64 | T & InternalContext$1 65 | 66 | -------------------------------------------------------------------------------- /docs/client-react-streaming.readfromreadablestreamlink._constructor_.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [ReadFromReadableStreamLink](./client-react-streaming.readfromreadablestreamlink.md) > [(constructor)](./client-react-streaming.readfromreadablestreamlink._constructor_.md) 4 | 5 | ## ReadFromReadableStreamLink.(constructor) 6 | 7 | Constructs a new instance of the `ReadFromReadableStreamLink` class 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | constructor(); 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/client-react-streaming.readfromreadablestreamlink.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [ReadFromReadableStreamLink](./client-react-streaming.readfromreadablestreamlink.md) 4 | 5 | ## ReadFromReadableStreamLink class 6 | 7 | A link that allows the response to be read from a readable stream, e.g. for hydration of a multipart response from RSC or a server loader in the browser. 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | declare class ReadFromReadableStreamLink extends ApolloLink 13 | ``` 14 | **Extends:** ApolloLink 15 | 16 | ## Constructors 17 | 18 | 34 | 48 |
19 | 20 | Constructor 21 | 22 | 23 | 24 | 25 | Modifiers 26 | 27 | 28 | 29 | 30 | Description 31 | 32 | 33 |
35 | 36 | [(constructor)()](./client-react-streaming.readfromreadablestreamlink._constructor_.md) 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | Constructs a new instance of the `ReadFromReadableStreamLink` class 45 | 46 | 47 |
49 | -------------------------------------------------------------------------------- /docs/client-react-streaming.removemultipartdirectiveslink._constructor_.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [RemoveMultipartDirectivesLink](./client-react-streaming.removemultipartdirectiveslink.md) > [(constructor)](./client-react-streaming.removemultipartdirectiveslink._constructor_.md) 4 | 5 | ## RemoveMultipartDirectivesLink.(constructor) 6 | 7 | Constructs a new instance of the `RemoveMultipartDirectivesLink` class 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | constructor(config: RemoveMultipartDirectivesConfig); 13 | ``` 14 | 15 | ## Parameters 16 | 17 | 33 | 47 |
18 | 19 | Parameter 20 | 21 | 22 | 23 | 24 | Type 25 | 26 | 27 | 28 | 29 | Description 30 | 31 | 32 |
34 | 35 | config 36 | 37 | 38 | 39 | 40 | RemoveMultipartDirectivesConfig 41 | 42 | 43 | 44 | 45 | 46 |
48 | -------------------------------------------------------------------------------- /docs/client-react-streaming.removemultipartdirectiveslink.request.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [RemoveMultipartDirectivesLink](./client-react-streaming.removemultipartdirectiveslink.md) > [request](./client-react-streaming.removemultipartdirectiveslink.request.md) 4 | 5 | ## RemoveMultipartDirectivesLink.request() method 6 | 7 | **Signature:** 8 | 9 | ```typescript 10 | request(operation: Operation, forward?: NextLink): Observable<{}>; 11 | ``` 12 | 13 | ## Parameters 14 | 15 | 31 | 45 | 61 |
16 | 17 | Parameter 18 | 19 | 20 | 21 | 22 | Type 23 | 24 | 25 | 26 | 27 | Description 28 | 29 | 30 |
32 | 33 | operation 34 | 35 | 36 | 37 | 38 | Operation 39 | 40 | 41 | 42 | 43 | 44 |
46 | 47 | forward 48 | 49 | 50 | 51 | 52 | NextLink 53 | 54 | 55 | 56 | 57 | _(Optional)_ 58 | 59 | 60 |
62 | **Returns:** 63 | 64 | Observable<{}> 65 | 66 | -------------------------------------------------------------------------------- /docs/client-react-streaming.resetapollosingletons.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [resetApolloSingletons](./client-react-streaming.resetapollosingletons.md) 4 | 5 | ## resetApolloSingletons() function 6 | 7 | > This export is only available in React Client Components 8 | 9 | Resets the singleton instances created for the Apollo SSR data transport and caches. 10 | 11 | To be used in testing only, like 12 | 13 | ```ts 14 | afterEach(resetApolloSingletons); 15 | ``` 16 | 17 | **Signature:** 18 | 19 | ```typescript 20 | declare function resetApolloSingletons(): void; 21 | ``` 22 | **Returns:** 23 | 24 | void 25 | 26 | -------------------------------------------------------------------------------- /docs/client-react-streaming.resetmanualssrapollosingletons.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [resetManualSSRApolloSingletons](./client-react-streaming.resetmanualssrapollosingletons.md) 4 | 5 | ## resetManualSSRApolloSingletons() function 6 | 7 | > This export is only available in React Client Components 8 | 9 | Resets the singleton instances created for the Apollo SSR data transport and caches. 10 | 11 | To be used in testing only, like 12 | 13 | ```ts 14 | afterEach(resetManualSSRApolloSingletons); 15 | ``` 16 | 17 | **Signature:** 18 | 19 | ```typescript 20 | declare function resetManualSSRApolloSingletons(): void; 21 | ``` 22 | **Returns:** 23 | 24 | void 25 | 26 | -------------------------------------------------------------------------------- /docs/client-react-streaming.revivetransportedqueryref.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [reviveTransportedQueryRef](./client-react-streaming.revivetransportedqueryref.md) 4 | 5 | ## reviveTransportedQueryRef() function 6 | 7 | 8 | **Signature:** 9 | 10 | ```typescript 11 | declare function reviveTransportedQueryRef(queryRef: TransportedQueryRef, client: ApolloClient$1): asserts queryRef is TransportedQueryRef & ReturnType>; 12 | ``` 13 | 14 | ## Parameters 15 | 16 | 32 | 46 | 60 |
17 | 18 | Parameter 19 | 20 | 21 | 22 | 23 | Type 24 | 25 | 26 | 27 | 28 | Description 29 | 30 | 31 |
33 | 34 | queryRef 35 | 36 | 37 | 38 | 39 | [TransportedQueryRef](./client-react-streaming.transportedqueryref.md) 40 | 41 | 42 | 43 | 44 | 45 |
47 | 48 | client 49 | 50 | 51 | 52 | 53 | ApolloClient$1<any> 54 | 55 | 56 | 57 | 58 | 59 |
61 | **Returns:** 62 | 63 | asserts queryRef is [TransportedQueryRef](./client-react-streaming.transportedqueryref.md) & ReturnType<typeof wrapQueryRef<any, any>> 64 | 65 | -------------------------------------------------------------------------------- /docs/client-react-streaming.skipdatatransport.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [skipDataTransport](./client-react-streaming.skipdatatransport.md) 4 | 5 | ## skipDataTransport() function 6 | 7 | Apply to a context to prevent this operation from being transported over the SSR data transport mechanism. 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | declare function skipDataTransport>(context: T): T & InternalContext; 13 | ``` 14 | 15 | ## Parameters 16 | 17 | 33 | 47 |
18 | 19 | Parameter 20 | 21 | 22 | 23 | 24 | Type 25 | 26 | 27 | 28 | 29 | Description 30 | 31 | 32 |
34 | 35 | context 36 | 37 | 38 | 39 | 40 | T 41 | 42 | 43 | 44 | 45 | 46 |
48 | **Returns:** 49 | 50 | T & InternalContext 51 | 52 | -------------------------------------------------------------------------------- /docs/client-react-streaming.ssrmultipartlink._constructor_.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [SSRMultipartLink](./client-react-streaming.ssrmultipartlink.md) > [(constructor)](./client-react-streaming.ssrmultipartlink._constructor_.md) 4 | 5 | ## SSRMultipartLink.(constructor) 6 | 7 | Constructs a new instance of the `SSRMultipartLink` class 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | constructor(config?: SSRMultipartLinkConfig); 13 | ``` 14 | 15 | ## Parameters 16 | 17 | 33 | 49 |
18 | 19 | Parameter 20 | 21 | 22 | 23 | 24 | Type 25 | 26 | 27 | 28 | 29 | Description 30 | 31 | 32 |
34 | 35 | config 36 | 37 | 38 | 39 | 40 | SSRMultipartLinkConfig 41 | 42 | 43 | 44 | 45 | _(Optional)_ 46 | 47 | 48 |
50 | -------------------------------------------------------------------------------- /docs/client-react-streaming.teetoreadablestream.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [teeToReadableStream](./client-react-streaming.teetoreadablestream.md) 4 | 5 | ## teeToReadableStream() function 6 | 7 | Apply to a context that will be passed to a link chain containing `TeeToReadableStreamLink`. 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | declare function teeToReadableStream>(onLinkHit: OnLinkHitFunction, context: T): T & InternalContext$1; 13 | ``` 14 | 15 | ## Parameters 16 | 17 | 33 | 47 | 61 |
18 | 19 | Parameter 20 | 21 | 22 | 23 | 24 | Type 25 | 26 | 27 | 28 | 29 | Description 30 | 31 | 32 |
34 | 35 | onLinkHit 36 | 37 | 38 | 39 | 40 | OnLinkHitFunction 41 | 42 | 43 | 44 | 45 | 46 |
48 | 49 | context 50 | 51 | 52 | 53 | 54 | T 55 | 56 | 57 | 58 | 59 | 60 |
62 | **Returns:** 63 | 64 | T & InternalContext$1 65 | 66 | -------------------------------------------------------------------------------- /docs/client-react-streaming.teetoreadablestreamlink._constructor_.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [TeeToReadableStreamLink](./client-react-streaming.teetoreadablestreamlink.md) > [(constructor)](./client-react-streaming.teetoreadablestreamlink._constructor_.md) 4 | 5 | ## TeeToReadableStreamLink.(constructor) 6 | 7 | Constructs a new instance of the `TeeToReadableStreamLink` class 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | constructor(); 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/client-react-streaming.teetoreadablestreamlink.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [TeeToReadableStreamLink](./client-react-streaming.teetoreadablestreamlink.md) 4 | 5 | ## TeeToReadableStreamLink class 6 | 7 | A link that allows the request to be cloned into a readable stream, e.g. for transport of multipart responses from RSC or a server loader to the browser. 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | declare class TeeToReadableStreamLink extends ApolloLink 13 | ``` 14 | **Extends:** ApolloLink 15 | 16 | ## Constructors 17 | 18 | 34 | 48 |
19 | 20 | Constructor 21 | 22 | 23 | 24 | 25 | Modifiers 26 | 27 | 28 | 29 | 30 | Description 31 | 32 | 33 |
35 | 36 | [(constructor)()](./client-react-streaming.teetoreadablestreamlink._constructor_.md) 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | Constructs a new instance of the `TeeToReadableStreamLink` class 45 | 46 | 47 |
49 | -------------------------------------------------------------------------------- /docs/client-react-streaming.transportedqueryref.topromise.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [TransportedQueryRef](./client-react-streaming.transportedqueryref.md) > [toPromise](./client-react-streaming.transportedqueryref.topromise.md) 4 | 5 | ## TransportedQueryRef.toPromise property 6 | 7 | Temporarily disabled - see https://github.com/apollographql/apollo-client-integrations/issues/332 8 | 9 | Will now be be `undefined` both in React Server Components and Client Components until we can find a better resolution. 10 | 11 | **Signature:** 12 | 13 | ```typescript 14 | toPromise?: undefined; 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/client-react-streaming.usewraptransportedqueryref.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [useWrapTransportedQueryRef](./client-react-streaming.usewraptransportedqueryref.md) 4 | 5 | ## useWrapTransportedQueryRef() function 6 | 7 | 8 | **Signature:** 9 | 10 | ```typescript 11 | declare function useWrapTransportedQueryRef(queryRef: QueryRef | TransportedQueryRef): QueryRef; 12 | ``` 13 | 14 | ## Parameters 15 | 16 | 32 | 46 |
17 | 18 | Parameter 19 | 20 | 21 | 22 | 23 | Type 24 | 25 | 26 | 27 | 28 | Description 29 | 30 | 31 |
33 | 34 | queryRef 35 | 36 | 37 | 38 | 39 | QueryRef<TData, TVariables> \| [TransportedQueryRef](./client-react-streaming.transportedqueryref.md) 40 | 41 | 42 | 43 | 44 | 45 |
47 | **Returns:** 48 | 49 | QueryRef<TData, TVariables> 50 | 51 | -------------------------------------------------------------------------------- /docs/client-react-streaming.wrappedapolloprovider.info.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [WrappedApolloProvider](./client-react-streaming.wrappedapolloprovider.md) > [info](./client-react-streaming.wrappedapolloprovider.info.md) 4 | 5 | ## WrappedApolloProvider.info property 6 | 7 | Information about the current package and it's export names, for use in error messages. 8 | 9 | **Signature:** 10 | 11 | ```typescript 12 | info: { 13 | pkg: string; 14 | }; 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/client-react-streaming.wrappedapolloprovider.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [WrappedApolloProvider](./client-react-streaming.wrappedapolloprovider.md) 4 | 5 | ## WrappedApolloProvider interface 6 | 7 | > This is only available in React Client Components 8 | 9 | A version of `ApolloProvider` particularly suited for React's streaming SSR. 10 | 11 | **Signature:** 12 | 13 | ```typescript 14 | interface WrappedApolloProvider 15 | ``` 16 | 17 | ## Properties 18 | 19 | 40 | 59 |
20 | 21 | Property 22 | 23 | 24 | 25 | 26 | Modifiers 27 | 28 | 29 | 30 | 31 | Type 32 | 33 | 34 | 35 | 36 | Description 37 | 38 | 39 |
41 | 42 | [info](./client-react-streaming.wrappedapolloprovider.info.md) 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | { pkg: string; } 51 | 52 | 53 | 54 | 55 | Information about the current package and it's export names, for use in error messages. 56 | 57 | 58 |
60 | -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | # Example Apps 2 | 3 | Just a quick explainer: 4 | 5 | - [./hack-the-supergraph-ssr](./hack-the-supergraph-ssr) is a simple app that is based on the [hack the supergraph demo app](https://github.com/apollographql/hack-the-supergraph) app. 6 | It only showcases SSR cases, but it's a good starting point for understanding how to use the library. 7 | - [./app-dir-experiments/](./app-dir-experiments) is an app we use to internally do experiments. It's not really an example app, but if you just want to play around, go ahead. 8 | - [./polls-demo](./polls-demo/) is a simple poll app that showcases both Server Components and Client Components in a single app. 9 | It show the difference between using Apollo Client in Server Components and Client Components. 10 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "../../node_modules/typescript/lib", 3 | "typescript.enablePromptUseWorkspaceTsdk": true 4 | } -------------------------------------------------------------------------------- /examples/app-dir-experiments/app/ApolloClient.ts: -------------------------------------------------------------------------------- 1 | import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client"; 2 | import { registerApolloClient } from "@apollo/client-integration-nextjs/rsc"; 3 | 4 | export const { getClient } = registerApolloClient(() => { 5 | return new ApolloClient({ 6 | cache: new InMemoryCache(), 7 | link: new HttpLink({ 8 | uri: "http://localhost:3000/api/graphql", 9 | // you can disable result caching here if you want to 10 | // (this does not work if you are rendering your page with `export const dynamic = "force-static"`) 11 | // fetchOptions: { cache: "no-store" }, 12 | }), 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/app/api/graphql/route.ts: -------------------------------------------------------------------------------- 1 | import { startServerAndCreateNextHandler } from "@as-integrations/next"; 2 | import { ApolloServer } from "@apollo/server"; 3 | import { gql } from "graphql-tag"; 4 | 5 | const typeDefs = gql` 6 | type User { 7 | id: String! 8 | name: String! 9 | } 10 | type Post { 11 | id: String! 12 | title: String! 13 | } 14 | type Query { 15 | getUser(id: String!): User 16 | getPosts: [Post!]! 17 | } 18 | `; 19 | 20 | const resolvers = { 21 | Query: { 22 | getUser: async () => 23 | new Promise((resolve) => { 24 | setTimeout(() => resolve({ id: "1", name: "John" }), 1000); 25 | }), 26 | getPosts: async () => 27 | new Promise((resolve) => { 28 | setTimeout( 29 | () => 30 | resolve([ 31 | { id: "1", title: "Post 1" }, 32 | { id: "2", title: "Post 2" }, 33 | ]), 34 | 3500 35 | ); 36 | }), 37 | }, 38 | }; 39 | 40 | const server = new ApolloServer({ 41 | resolvers, 42 | typeDefs, 43 | }); 44 | 45 | const handler = startServerAndCreateNextHandler(server); 46 | 47 | export async function GET(request: Request) { 48 | return handler(request); 49 | } 50 | 51 | export async function POST(request: Request) { 52 | return handler(request); 53 | } 54 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apollographql/apollo-client-integrations/c465affd9e31674e868cdc7ac90cf0cab4c7f70e/examples/app-dir-experiments/app/favicon.ico -------------------------------------------------------------------------------- /examples/app-dir-experiments/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "./globals.css"; 2 | 3 | export const metadata = { 4 | title: "Create Next App", 5 | description: "Generated by create next app", 6 | }; 7 | 8 | export default function RootLayout({ 9 | children, 10 | }: { 11 | children: React.ReactNode; 12 | }) { 13 | return ( 14 | 15 | {children} 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { gql } from "@apollo/client"; 2 | import { getClient } from "./ApolloClient"; 3 | import Link from "next/link"; 4 | 5 | export const dynamic = "force-dynamic"; 6 | // 'auto' | 'force-dynamic' | 'error' | 'force-static' 7 | 8 | const userQuery = gql` 9 | query { 10 | getUser(id: "1") { 11 | id 12 | name 13 | } 14 | } 15 | `; 16 | 17 | export default async function Home() { 18 | const { data } = await getClient().query({ query: userQuery }); 19 | 20 | return ( 21 |
22 |

data received during RSC render: {JSON.stringify(data)}

23 |

24 | SSR examples are here 25 |

26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/app/ssr/ApolloWrapper.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { ApolloLink, HttpLink } from "@apollo/client"; 4 | import { 5 | ApolloNextAppProvider, 6 | InMemoryCache, 7 | ApolloClient, 8 | SSRMultipartLink, 9 | } from "@apollo/client-integration-nextjs"; 10 | import { setVerbosity } from "ts-invariant"; 11 | 12 | setVerbosity("debug"); 13 | 14 | function makeClient() { 15 | const httpLink = new HttpLink({ 16 | uri: "http://localhost:3000/api/graphql", 17 | fetchOptions: { cache: "no-store" }, 18 | }); 19 | 20 | return new ApolloClient({ 21 | cache: new InMemoryCache(), 22 | link: 23 | typeof window === "undefined" 24 | ? ApolloLink.from([ 25 | new SSRMultipartLink({ 26 | stripDefer: true, 27 | }), 28 | httpLink, 29 | ]) 30 | : httpLink, 31 | }); 32 | } 33 | 34 | export function ApolloWrapper({ children }: React.PropsWithChildren) { 35 | return ( 36 | 37 | {children} 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/app/ssr/layout.tsx: -------------------------------------------------------------------------------- 1 | import { ApolloWrapper } from "./ApolloWrapper"; 2 | export default function Layout({ children }: React.PropsWithChildren) { 3 | return {children}; 4 | } 5 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | module.exports = nextConfig; 5 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app-dir", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "prebuild": "yarn workspace @apollo/client-integration-nextjs run build", 8 | "build": "next build", 9 | "start": "next start", 10 | "lint": "next lint" 11 | }, 12 | "dependencies": { 13 | "@apollo/client": "^3.13.4", 14 | "@apollo/client-integration-nextjs": "workspace:^", 15 | "@apollo/server": "^4.9.5", 16 | "@as-integrations/next": "^3.0.0", 17 | "@types/node": "20.12.11", 18 | "@types/react": "^19.0.0", 19 | "@types/react-dom": "^19.0.0", 20 | "client-only": "^0.0.1", 21 | "encoding": "^0.1.13", 22 | "eslint": "8.36.0", 23 | "eslint-config-next": "13.2.4", 24 | "graphql": "^16.6.0", 25 | "html-differ": "^1.4.0", 26 | "next": "^15.2.4", 27 | "react": "^19.0.0", 28 | "react-dom": "^19.0.0", 29 | "server-only": "^0.0.1", 30 | "typescript": "^5.7.3" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/app-dir-experiments/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "paths": { 23 | "@/*": ["./*"] 24 | } 25 | }, 26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 27 | "exclude": ["node_modules"] 28 | } 29 | -------------------------------------------------------------------------------- /examples/hack-the-supergraph-ssr/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /examples/hack-the-supergraph-ssr/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /examples/hack-the-supergraph-ssr/README.md: -------------------------------------------------------------------------------- 1 | This is based on the [Hack the supergraph demo app](https://github.com/apollographql/hack-the-supergraph) 2 | 3 | You can change the delay for deferred fragments using the "Demo Settings" button in the top right. 4 | As we are dealing with a real network connection, the _real_ delay will be a little longer than what you set here. 5 | The app is configured so that all fragments arriving within the first 100ms will still be part of SSR, and all fragments that take longer than 100ms will be fetched on the client. 6 | -------------------------------------------------------------------------------- /examples/hack-the-supergraph-ssr/app/ClientLayout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | // chakra makes this a client component 3 | 4 | import { ChakraProvider, Container } from "@chakra-ui/react"; 5 | import Spinner from "@/components/Spinner"; 6 | import { Suspense } from "react"; 7 | import theme from "@/theme"; 8 | import { CacheProvider } from "@chakra-ui/next-js"; 9 | import Nav from "@/components/Nav"; 10 | export function ClientLayout({ children }: React.PropsWithChildren) { 11 | return ( 12 | 13 | 14 |