{"id":23711203,"url":"https://github.com/daphnesmit/with-next-apollo-tree-walker","last_synced_at":"2025-09-03T17:32:31.797Z","repository":{"id":54879944,"uuid":"331935581","full_name":"daphnesmit/with-next-apollo-tree-walker","owner":"daphnesmit","description":"Apollo SSR data fetching on a per component basis with getDataFromTree without having to (pre)fetch in getInitialProps","archived":false,"fork":false,"pushed_at":"2021-01-25T07:50:27.000Z","size":423,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-27T12:47:19.225Z","etag":null,"topics":["apollo","apollo-client","getdatafromtree","nextjs","react","ssr"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/with-next-apollo-tree-walker","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daphnesmit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-22T12:10:29.000Z","updated_at":"2022-01-05T22:23:17.000Z","dependencies_parsed_at":"2022-08-14T05:31:14.521Z","dependency_job_id":null,"html_url":"https://github.com/daphnesmit/with-next-apollo-tree-walker","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/daphnesmit/with-next-apollo-tree-walker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daphnesmit%2Fwith-next-apollo-tree-walker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daphnesmit%2Fwith-next-apollo-tree-walker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daphnesmit%2Fwith-next-apollo-tree-walker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daphnesmit%2Fwith-next-apollo-tree-walker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daphnesmit","download_url":"https://codeload.github.com/daphnesmit/with-next-apollo-tree-walker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daphnesmit%2Fwith-next-apollo-tree-walker/sbom","scorecard":{"id":322201,"data":{"date":"2025-08-11","repo":{"name":"github.com/daphnesmit/with-next-apollo-tree-walker","commit":"9d28b3b6dc6428678bbe41c161882915e176bffe"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/5 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/cleanup_artifacts.yml:1","Warn: no topLevel permission defined: .github/workflows/main.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":2,"reason":"dependency not pinned by hash detected -- score normalized to 2","details":["Warn: third-party GitHubAction not pinned by hash: .github/workflows/cleanup_artifacts.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/daphnesmit/with-next-apollo-tree-walker/cleanup_artifacts.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/daphnesmit/with-next-apollo-tree-walker/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/daphnesmit/with-next-apollo-tree-walker/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/daphnesmit/with-next-apollo-tree-walker/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/daphnesmit/with-next-apollo-tree-walker/main.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/daphnesmit/with-next-apollo-tree-walker/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/daphnesmit/with-next-apollo-tree-walker/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/daphnesmit/with-next-apollo-tree-walker/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/daphnesmit/with-next-apollo-tree-walker/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/daphnesmit/with-next-apollo-tree-walker/main.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/daphnesmit/with-next-apollo-tree-walker/main.yml/main?enable=pin","Info:   0 out of   8 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   3 third-party GitHubAction dependencies pinned","Info:   1 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'","Warn: branch protection not enabled for branch 'develop'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 22 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"65 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-vxf5-wxwp-m7g9","Warn: Project is vulnerable to: GHSA-9gr3-7897-pp7m","Warn: Project is vulnerable to: GHSA-25mp-g6fv-mqxx","Warn: Project is vulnerable to: GHSA-fmvm-x8mv-47mj","Warn: Project is vulnerable to: GHSA-c59h-r6p8-q9wc","Warn: Project is vulnerable to: GHSA-g77x-44xx-532m","Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f","Warn: Project is vulnerable to: GHSA-qpjv-v59x-3qc4","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-gp95-ppv5-3jc5","Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx","Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T01:38:55.523Z","repository_id":54879944,"created_at":"2025-08-18T01:38:55.523Z","updated_at":"2025-08-18T01:38:55.523Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273477397,"owners_count":25112679,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","apollo-client","getdatafromtree","nextjs","react","ssr"],"created_at":"2024-12-30T19:34:32.354Z","updated_at":"2025-09-03T17:32:31.476Z","avatar_url":"https://github.com/daphnesmit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# with-next-apollo-tree-walker\nApollo SSR data fetching on a per component basis with getDataFromTree without having to (pre)fetch in getInitialProps\n\n[![CI Status](https://github.com/daphnesmit/with-next-apollo-tree-walker/workflows/CI/badge.svg)](https://github.com/daphnesmit/with-next-apollo-tree-walker/actions)\n[![npm version](https://badge.fury.io/js/with-next-apollo-tree-walker.svg)](https://badge.fury.io/js/with-next-apollo-tree-walker)\n\n## What is it?\nThis package consists of a `withApolloTreeWalker` HOC and a `useApolloCacheController` hook.\nWith this package you can achieve SSR data fetching on a per component basis without having to (pre)fetch in getInitialProps.\n\nWe integrate Apollo with Apollo's [getDataFromTree](https://www.apollographql.com/docs/react/performance/server-side-rendering/#executing-queries-with-getdatafromtree) to fetch queries on the server from inside any component using useQuery and hydrate them in the client with a cache controller instance.\n\nBecause our app uses Apollo Client, some of the components in the React tree probably execute a GraphQL query with the useQuery hook. We can instruct Apollo Client to execute all of the queries required by the tree's components with the getDataFromTree function.\n\nThis function walks down the entire tree and executes every required query it encounters (including nested queries). It returns a Promise that resolves when all result data is ready in the Apollo Client cache.\n\nWhen the Promise resolves, you're ready to render your React tree and return it, along with the current state of the Apollo Client cache.\n\nWe use a class instance called ApolloCacheControl to manage all registered caches. So we can have multiple caches in case we have multiple Apollo clients.\nAfter getDataFromTree has resolved all promises, we get a snapshot of the cache and hydrate that to the client where we use is as an initial state for our Apollo client.\n\n*Sidenote!*\nApollo's getDataFromTree walks down the entire React tree.\nIt'll run renderToStaticMarkup from ReactDOMServer. Note that this is the React SSR API and means that it does a full server-render of the whole React tree.\n\nNote that renderToStaticMarkup is a synchronous run to completion method, meaning that it can't await promises as of right now (Suspense might solve this).\n\nIn practice though you have useQuery and \u003cQuery\u003e components deeply nested in the React tree. React can't await those as said, so this is worked around by throwing a promise every time a query is found.\n\nWhen the promise is thrown that is awaited and then the rendering starts again, from the beginning of the tree.\n\nThis means that if you have nested queries you cause a lot of full server-renders.\n\nThis solution might cause you a performance overhead (and general bundle size when using Apollo is quite heavy currently). \n\nBut try it out and see if it is a bottleneck for you!\n\n## Usage\nSee the `example` folder for a full fletched example on how to use this.\n\nIn your Custom _app.tsx add the HOC:\n\n```typescript\nimport { withApolloServerSideRender } from 'with-next-apollo-tree-walker'\nimport { useApollo } from '../utils/apolloClient'\n\nfunction MyApp({ Component, pageProps }: AppProps)  {\n  const apolloClient = useApollo('your-cache-name')\n\n  return (\n    \u003cApolloProvider client={apolloClient}\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/ApolloProvider\u003e\n  )\n}\n\nexport default withApolloServerSideRender(MyApp)\n```\n\nIn your custom hook useApollo you need to register and extract your cache.\n\n```typescript\nimport { useApolloCacheController } from  'with-next-apollo-tree-walker'\n\nimport { ApolloClient, HttpLink, InMemoryCache, NormalizedCacheObject } from '@apollo/client'\nimport { useMemo } from 'react'\n\nlet apolloClient: ApolloClient\u003cNormalizedCacheObject\u003e | undefined\n\nfunction createApolloClient({ registerCache, initialState }) {\n\n  const link = new HttpLink({\n    uri: 'YOUR_URI',\n  })\n  \n  const cache = new InMemoryCache({}).restore(initialState || {})\n\n  if (registerCache) {\n    registerCache(cache)\n  }\n\n  return new ApolloClient({\n    ssrMode: typeof window === 'undefined',\n    link,\n    cache,\n  })\n}\n\nfunction initializeApollo({ registerCache, initialState }) {\n  const _apolloClient = apolloClient ?? createApolloClient({ registerCache, initialState })\n\n  // For SSG and SSR always create a new Apollo Client\n  if (typeof window === 'undefined') return _apolloClient\n\n  // Create the Apollo Client once in the client\n  if (!apolloClient) apolloClient = _apolloClient\n\n  return _apolloClient\n}\n\nexport function useApollo(cacheId: string) {\n  const ApolloCacheController = useApolloCacheController()\n\n  const registerCache = (cache: InMemoryCache) =\u003e ApolloCacheController.registerCache(cacheId, cache)\n  const initialState = ApolloCacheController.getExtractedCache(cacheId)\n\n  return useMemo(() =\u003e initializeApollo({ registerCache, initialState }), [registerCache, initialState])\n}\n```\n\n## Authors\nMade by [Lennard Westerveld](https://github.com/LennardWesterveld)\nPublished by [Daphne Smit](https://github.com/daphnesmit)\n\n## Prior Art\nThe approach of doing an initial \"data fetching pass\" is inspired by:\n\n- [`react-ssr-prepass`](https://github.com/FormidableLabs/react-ssr-prepass)\n- [`react-apollo`'s `getDataFromTree`](https://github.com/apollographql/react-apollo/blob/master/src/getDataFromTree.ts)\n\n## Production Build\n\nRun `npm run build` to build a file for production and emit the types\n\n## Development Build\nRun `npm run dev` to build a file for development\n## Contributing\nYou are free to contribute to this project!\nPlease use a conventional commit and make pull requests to the develop branch (pre-release branch).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaphnesmit%2Fwith-next-apollo-tree-walker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaphnesmit%2Fwith-next-apollo-tree-walker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaphnesmit%2Fwith-next-apollo-tree-walker/lists"}