Some text
863 |Test
864 |Some text
925 |Test
926 |Lorem
971 |Lorem Ipsum
972 |Lorem
988 |Ipsum
989 |{errorMessage}
1687 | ); 1688 | } 1689 | 1690 | return null; 1691 | } 1692 | } 1693 | 1694 | export default withRouter(Callback); 1695 | ``` 1696 | 1697 | `getInitialProps` is an async static method. It can asynchronously fetch anything that resolves to a JavaScript plain Object, which populates props. 1698 | 1699 | Data returned from `getInitialProps` is serialized when server rendering, similar to a `JSON.stringify`. Make sure the returned object from `getInitialProps` is a plain Object and not using `Date`, `Map` or `Set`. 1700 | 1701 | For the initial page load, `getInitialProps` will execute on the server only. `getInitialProps` will only be executed on the client when navigating to a different route via the Link component or using the routing APIs. 1702 | 1703 | ## Step 14 - GraphQL with Apollo integration 1704 | 1705 | Apollo Client is the best way to use GraphQL to build client applications. The client is designed to help you quickly build a UI that fetches data with GraphQL, and can be used with any JavaScript front-end. 1706 | 1707 | With Apollo’s declarative approach to data fetching, all of the logic for retrieving your data, tracking loading and error states, and updating your UI is encapsulated in a single Query component. This encapsulation makes composing your Query components with your presentational components very easy. 1708 | 1709 | Let’s see how it looks like in practice with React Apollo. 1710 | 1711 | The easiest way to get started with Apollo Client is by using Apollo Boost. It's a starter kit that configures your client for you with recommended settings. 1712 | 1713 | Install packages: 1714 | 1715 | ```bash 1716 | yarn add apollo-boost react-apollo graphql graphql-tag 1717 | ``` 1718 | 1719 | - `apollo-boost` Package containing everything you need to set up Apollo Client 1720 | - `react-apollo` View layer integration for React 1721 | - `graphql` Also parses your GraphQL queries 1722 | - `graphql-tag` Provides template literal tag you can use to concisely write a GraphQL query that is parsed into the standard GraphQL AST 1723 | 1724 | Now you have all the dependencies you need, let’s create your Apollo Client. The only thing you need to get started is the endpoint for your GraphQL server. 1725 | 1726 | If you don’t pass in uri directly, it defaults to the /graphql endpoint on the same host your app is served from. 1727 | 1728 | 1729 | #### GraphQL authentication 1730 | 1731 | Apollo Client uses the ultra flexible Apollo Link that includes several options for authentication. 1732 | 1733 | We will use cookies for storing github access_token and send it as an authorization header. It’s easy to add an authorization header to every HTTP request by adding `headers` to ApolloClient. 1734 | 1735 | It’s very easy to tell your network interface to send the cookie along with every request. You just need to pass the headers option. e.g. `headers: 'token'` 1736 | 1737 | In this example, we’ll pull the login token from cookies every time a request is sent: 1738 | 1739 | `pages/_app.js` 1740 | 1741 | ```js 1742 | const token = Cookies.get('access_token'); 1743 | 1744 | const client = new ApolloClient({ 1745 | uri: 'https://api.github.com/graphql', 1746 | headers: { authorization: `Bearer ${token}` }, 1747 | }); 1748 | 1749 | class MainApp extends App { 1750 | // ... 1751 | render() { 1752 | // ... 1753 | const token = Cookies.get('access_token'); 1754 | 1755 | const client = new ApolloClient({ 1756 | uri: 'https://api.github.com/graphql', 1757 | headers: { authorization: `Bearer ${token}` }, 1758 | }); 1759 | 1760 | return ( 1761 |128 | desc 129 |
130 |Title
9 |Default
10 |Some text
10 |Test
11 |Some text
10 |Test
11 |Lorem
9 |Lorem Ipsum
10 |Lorem
10 |Ipsum
11 |Test
Test
)).toBe(true); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /components/atoms/IconButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { IconButton as MaterialIconButton } from '@material-ui/core'; 4 | 5 | const IconButton = (props) => { 6 | const { children, ...defaultProps } = props; 7 | 8 | return ( 9 |Test
Test
)).toBe(true); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /components/atoms/List/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { List as MaterialList } from '@material-ui/core'; 4 | 5 | const List = (props) => { 6 | const { children, ...defaultProps } = props; 7 | 8 | return ( 9 |test
9 |test
10 |test
11 |test
12 |Lorem
10 |Ipsum
11 |Test
12 |Test
)).toBe(true); 15 | expect(wrapper.contains(Ipsum
)).toBe(true); 16 | expect(wrapper.contains(Lorem
)).toBe(true); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /components/atoms/ListItem/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { ListItem as MaterialListItem } from '@material-ui/core'; 4 | 5 | const ListItem = (props) => { 6 | const { children, ...defaultProps } = props; 7 | 8 | return ( 9 |Lorem
10 |Ipsum
11 |Test
12 |Test
)).toBe(true); 15 | expect(wrapper.contains(Ipsum
)).toBe(true); 16 | expect(wrapper.contains(Lorem
)).toBe(true); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /components/atoms/ListItemIcon/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { ListItemIcon as MaterialListItemIcon } from '@material-ui/core'; 4 | 5 | const ListItemIcon = (props) => { 6 | const { children, ...defaultProps } = props; 7 | 8 | return ( 9 |Lorem
10 |Ipsum
11 |Test
12 |Test
)).toBe(true); 15 | expect(wrapper.contains(Ipsum
)).toBe(true); 16 | expect(wrapper.contains(Lorem
)).toBe(true); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /components/atoms/ListItemText/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { ListItemText as MaterialListItemText } from '@material-ui/core'; 4 | 5 | const ListItemText = (props) => { 6 | const { children, ...defaultProps } = props; 7 | 8 | return ( 9 |Lorem
10 |Ipsum
11 |Test
12 |Test
)).toBe(true); 15 | expect(wrapper.contains(Ipsum
)).toBe(true); 16 | expect(wrapper.contains(Lorem
)).toBe(true); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /components/atoms/Loader/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CircularProgress from '@material-ui/core/CircularProgress'; 3 | 4 | const Loader = props => ( 5 |Lorem
10 |Lorem
)).toBe(true); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /components/atoms/Toolbar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Toolbar as MaterialToolbar } from '@material-ui/core'; 4 | 5 | const Toolbar = (props) => { 6 | const { children, ...defaultProps } = props; 7 | 8 | return ( 9 |tool 2
10 |tool 3
11 |Test
Test
)).toBe(true); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /components/atoms/Typography/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Typography as MaterialTypography } from '@material-ui/core'; 4 | 5 | const Typography = (props) => { 6 | const { children, ...defaultProps } = props; 7 | 8 | return ( 9 |{errorMessage}
57 | ); 58 | } 59 | 60 | return null; 61 | } 62 | } 63 | 64 | export default withRouter(Callback); 65 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Home } from 'components'; 3 | import HeaderContainer from 'containers/HeaderContainer'; 4 | import ViewerRepoList from 'containers/ViewerRepoList'; 5 | 6 | const Index = () => ( 7 |