[{"slug":"understanding-how-a-single-source-of-truth-library-can-be-implemented-in-react","frontmatter":{"content":"\nRecently I was using [Apollo Client](https://www.apollographql.com/docs/react/v2/data/local-state/#:~:text=When%20you%27re%20using%20Apollo%20Client%20to%20work%20with%20local%20state%2C%20your%20Apollo%20cache%20becomes%20the%20single%20source%20of%20truth%20for%20all%20of%20your%20local%20and%20remote%20data) and it was able to update the components using `useQuery` when I modified the DB using `useMutation.` How was it able to do that was my question?\n\nThe best way to understand how an *abstraction* works is by implementing that. So, I did the following implementation which helped me understood how it works. Obviously, Apollo client implementation would be much more complex. \n\nA very simple \"Single Source of Truth\" Library Implementation and it's usage\n\n```jsx\nimport React from 'react';\n\n// A simple Single Source of Truth Library implementation\nlet SingleSourceOfTruth = (function() {\n let context = React.createContext();\n let Provider = context.Provider;\n return {\n useList() {\n let [cache, setCache] = React.useContext(context);\n function setList(val) {\n setCache(val);\n }\n\n return [cache, setList];\n },\n context,\n getStore(init) {\n // Library user would use this and provide the value to Provider\n // React re-renders every component using Context Consumer(i.e. having useContext hook usage)\n return React.useState(init);\n },\n Provider\n };\n})();\n\nfunction ShowListPlace1() {\n // Indirectly using useContext which would cause this component to be re-rendered when Context value changes.\n let [list] = SingleSourceOfTruth.useList();\n return (\n

\n {list.map(item => {\n return

{item}

;\n })}\n

\n );\n}\n\nfunction ShowListPlace2() {\n // Indirectly using useContext which would cause this component to be re-rendered when Context value changes.\n let [list, setList] = SingleSourceOfTruth.useList();\n let [items, setItems] = React.useState('');\n return (\n

\n {\n setItems(e.target.value);\n }}\n />\n {\n setList(items.split('\\n'));\n }}\n >\n Update List\n \n {list.map(item => {\n return

{item}

;\n })}\n

\n );\n}\n\nexport default function App() {\n let store = SingleSourceOfTruth.getStore(['Item1', 'Item2']);\n return (\n \n

\n Hello StackBlitz!\n \n

\n \n );\n}\n```\n\n**Output:**\n\n![Aug-28-2021 18-06-27.gif](/notion/Understanding%20how%20a%20Single%20Source%20of%20Truth%20library%20c8a76ddc726b46bf8342cdaaffc7e8eb/Aug-28-2021_18-06-27.gif)\n\n### Link to [StackBlitz](https://stackblitz.com/edit/react-c5mr9q)","data":{"category":"ApolloClient, React, build-react-internals","creationTs":1630152180000,"date":"August 28, 2021 2:03 PM","lastModified":"September 14, 2021 9:22 AM","lastModifiedTs":1631604120000,"published":"Yes","title":"Understanding how a Single Source of Truth library can be implemented in React"},"isEmpty":false,"excerpt":"","category":["ApolloClient","React","build-react-internals"],"creationTs":1630152180000,"date":"August 28, 2021","lastModified":"September 14, 2021 9:22 AM","lastModifiedTs":1631604120000,"published":"Yes","title":"Understanding how a Single Source of Truth library can be implemented in React","updated":"September 14, 2021"},"content":"

Recently I was using Apollo Client and it was able to update the components using useQuery when I modified the DB using useMutation. How was it able to do that was my question?

The best way to understand how an abstraction works is by implementing that. So, I did the following implementation which helped me understood how it works. Obviously, Apollo client implementation would be much more complex.

A very simple "Single Source of Truth" Library Implementation and it's usage

import React from 'react';\n\n// A simple Single Source of Truth Library implementation\nlet SingleSourceOfTruth = (function() {\n  let context = React.createContext();\n  let Provider = context.Provider;\n  return {\n    useList() {\n      let [cache, setCache] = React.useContext(context);\n      function setList(val) {\n        setCache(val);\n      }\n\n      return [cache, setList];\n    },\n    context,\n    getStore(init) {\n      // Library user would use this and provide the value to Provider\n      // React re-renders every component using Context Consumer(i.e. having useContext hook usage)\n      return React.useState(init);\n    },\n    Provider\n  };\n})();\n\nfunction ShowListPlace1() {\n  // Indirectly using useContext which would cause this component to be re-rendered when Context value changes.\n  let [list] = SingleSourceOfTruth.useList();\n  return (\n    <div>\n      {list.map(item => {\n        return <div>{item}</div>;\n      })}\n    </div>\n  );\n}\n\nfunction ShowListPlace2() {\n  // Indirectly using useContext which would cause this component to be re-rendered when Context value changes.\n  let [list, setList] = SingleSourceOfTruth.useList();\n  let [items, setItems] = React.useState('');\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column' }}>\n      <textarea\n        placeholder=\"Provide newline separate values\"\n        value={items}\n        onChange={e => {\n          setItems(e.target.value);\n        }}\n      />\n      <button\n        onClick={() => {\n          setList(items.split('\\n'));\n        }}\n      >\n        Update List\n      </button>\n      {list.map(item => {\n        return <div>{item}</div>;\n      })}\n    </div>\n  );\n}\n\nexport default function App() {\n  let store = SingleSourceOfTruth.getStore(['Item1', 'Item2']);\n  return (\n    <SingleSourceOfTruth.Provider value={store}>\n      <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>\n        <ShowListPlace1>Hello StackBlitz!</ShowListPlace1>\n        <ShowListPlace2 />\n      </div>\n    </SingleSourceOfTruth.Provider>\n  );\n}\n

Output:

$\"Aug-28-2021$

Link to StackBlitz

\n"}]

Category: ApolloClient