{"id":19763091,"url":"https://github.com/fdiskas/apollo-rest-client-demo","last_synced_at":"2026-04-11T04:33:21.375Z","repository":{"id":47356221,"uuid":"313775950","full_name":"FDiskas/apollo-rest-client-demo","owner":"FDiskas","description":"Introduction to tailwindcss, nextjs, apollow client","archived":false,"fork":false,"pushed_at":"2021-09-02T09:04:16.000Z","size":1111,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-10T14:10:55.568Z","etag":null,"topics":["apollo-client","nextjs","tailwindcss"],"latest_commit_sha":null,"homepage":"","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/FDiskas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"License.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["fdiskas"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"custom":"https://paypal.me/VytenisKuciauskas"}},"created_at":"2020-11-18T00:11:25.000Z","updated_at":"2021-09-02T09:04:08.000Z","dependencies_parsed_at":"2022-09-04T19:32:16.002Z","dependency_job_id":null,"html_url":"https://github.com/FDiskas/apollo-rest-client-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/FDiskas/apollo-rest-client-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FDiskas%2Fapollo-rest-client-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FDiskas%2Fapollo-rest-client-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FDiskas%2Fapollo-rest-client-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FDiskas%2Fapollo-rest-client-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FDiskas","download_url":"https://codeload.github.com/FDiskas/apollo-rest-client-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FDiskas%2Fapollo-rest-client-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31669116,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"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-client","nextjs","tailwindcss"],"created_at":"2024-11-12T04:08:08.067Z","updated_at":"2026-04-11T04:33:21.354Z","avatar_url":"https://github.com/FDiskas.png","language":"TypeScript","funding_links":["https://github.com/sponsors/fdiskas","https://paypal.me/VytenisKuciauskas"],"categories":[],"sub_categories":[],"readme":"## Apollo react state\n\n### Create boilerplate\n\n1. `yarn create next-app --example with-typescript .`\n1. `git init`\n1. `yarn dev` 🌟 check if it works\n\n### Add tools\n\n1. `npm i -g mrm` https://mrm.js.org\n1. `mrm editorconfig -i`\n1. `mrm eslint`\n1. `mrm prettier -i`\n1. `yarn add -D eslint-plugin-prettier` https://github.com/prettier/eslint-plugin-prettier\n1. Update `.eslintrc.json` file\n\n   ```json\n     ...\n     \"plugins\": [\"prettier\", ...],\n     ...\n     \"env\": {\n       \"es6\": true,\n       \"browser\": true,\n       \"node\": true\n     },\n     \"rules\": {\n       \"prettier/prettier\": \"error\"\n     }\n     ...\n   ```\n\n1. `mrm license -i`\n1. `mrm stylelint`\n1. Change vscode settings - format on save\n\n### Add styles\n\n1. `yarn add -D sass`\n1. `yarn add tailwindcss -D`\n1. create file `postcss.config.js`\n1. `yarn add postcss-preset-env -D`\n\n   ```js\n   module.exports = {\n     plugins: ['tailwindcss', 'postcss-preset-env']\n   };\n   ```\n\n1. Install vscode plugin https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss\n1. Edit `.stylelintrc`\n\n   ```json\n     \"rules\": {\n       \"at-rule-no-unknown\": [\n         true,\n         {\n           \"ignoreAtRules\": [\n             \"tailwind\",\n             \"apply\",\n             \"responsive\",\n             \"variants\",\n             \"screen\"\n           ]\n         }\n       ]\n     }\n   ```\n\n1. Create VSCode settings file `.vscode/settings.json`\n\n   ```json\n   {\n     \"stylelint.enable\": true,\n     \"scss.validate\": false,\n     \"editor.formatOnSave\": true\n   }\n   ```\n\n1. initialize TailWind `yarn tailwind init`\n\n   ```js\n   module.exports = {\n     ...\n     purge:\n       process.env.NODE_ENV === \"production\"\n         ? {\n             mode: \"all\",\n             content: [\"./src/**/*.tsx\"],\n           }\n         : false,\n     ...\n   };\n   ```\n\n1. Restart IDE\n\n### Reorganize folder structure\n\n1. Move to `src` dir\n   - pages\n   - components\n   - interfaces\n   - utils\n1. Create global style `src/styles/main.scss`\n\n   ```scss\n   /* purgecss start ignore */\n   @tailwind base;\n   @tailwind screens;\n   @tailwind components;\n\n   /* purgecss end ignore */\n\n   @tailwind utilities;\n   ```\n\n1. create file `src/pages/_app.tsx`\n\n   ```tsx\n   import { AppProps } from 'next/dist/next-server/lib/router/router';\n   import '../styles/main.scss';\n\n   export default function MyApp({ Component, pageProps }: AppProps) {\n     return \u003cComponent {...pageProps} /\u003e;\n   }\n   ```\n\n1. check if it works try add to `\u003cnav\u003e` element thous classes\n\n   ```html\n   \u003cnav\n     className=\"fixed z-50 w-full bg-white top-0 flex flex-wrap items-center gap-2 px-2 py-3 shadow-lg\"\n   /\u003e\n   ```\n\n### Setup apollo\n\n1. Install apollo\n\n   ```sh\n   yarn add @apollo/client\n   ```\n\n1. Install apollo-link-rest\n\n   ```sh\n   yarn add apollo-link-rest apollo-link graphql graphql-anywhere qs\n   ```\n\n1. Because we are preparing to have SSR (server side rendering) `fetch` method should be supported also for node\n\n   ```sh\n   yarn add isomorphic-unfetch\n   ```\n\n### Setup the basic infrastructure\n\n1. Create `.env` file with environment variables and expose them to the browser also\n\n   \u003e **Note:** If you have some secret variables add them to `.env.local` file and do not commit to the repo (ignored by default). More info at [NextJs Docs](https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser)\n\n   ```sh\n   NEXT_PUBLIC_REST_ENDPOINT=https://jsonplaceholder.typicode.com\n   ```\n\n1. Create Apollo client `src/gql/client.ts`\n1. Create queries file `src/gql/query.ts`\n1. Update `tsconfig.json`\n\n```json\n  \"compilerOptions\": {\n    ...,\n    \"baseUrl\": \"./\"\n  }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffdiskas%2Fapollo-rest-client-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffdiskas%2Fapollo-rest-client-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffdiskas%2Fapollo-rest-client-demo/lists"}