(fix) - make all components in examples have displayNames in devtools

examples/1-getting-started/src/app/Home.tsx

@@ -46,6 +46,8 @@ export const Home: FC = () => {
   );
 };
 
+Home.displayName = 'Home';
+
 const TodoQuery = gql`
   query {
     todos {

examples/1-getting-started/src/app/components/Error.tsx

@@ -7,3 +7,5 @@ export const Error: FC = props => (
     <p>Message: {props.children}</p>
   </>
 );
+
+Error.displayName = 'Error';

examples/1-getting-started/src/app/components/Loading.tsx

@@ -1,3 +1,5 @@
 import React from 'react';
 
 export const Loading = () => <p>Loading...</p>;
+
+Loading.displayName = 'Loading';

examples/1-getting-started/src/app/components/Todo.tsx

@@ -23,9 +23,9 @@ export const Todo: FC<Props> = props => {
 Todo.displayName = 'Todo';
 
 const RemoveTodo = `
-mutation($id: ID!) {
-  toggleTodo(id: $id) {
-    id
+  mutation($id: ID!) {
+    toggleTodo(id: $id) {
+      id
+    }
   }
-}
 `;

examples/1-getting-started/src/app/index.tsx

@@ -17,4 +17,6 @@ export const App: FC = () => (
   </Provider>
 );
 
+App.displayName = 'App';
+
 ReactDOM.render(<App />, document.getElementById('root'));

examples/2-using-subscriptions/src/app/Messages.tsx

@@ -31,6 +31,8 @@ export const Messages: FC = () => {
   );
 };
 
+Messages.displayName = 'Messages';
+
 const NewMessageSubQuery = gql`
   subscription messageSub {
     newMessages {

examples/2-using-subscriptions/src/app/components/Error.tsx

@@ -7,3 +7,5 @@ export const Error: FC = props => (
     <p>Message: {props.children}</p>
   </>
 );
+
+Error.displayName = 'Error';

examples/2-using-subscriptions/src/app/components/Message.tsx

@@ -16,3 +16,5 @@ export const Message: FC<MessageEntry> = props => (
     <li>{props.message}</li>
   </div>
 );
+
+Message.displayName = 'Message';

examples/2-using-subscriptions/src/app/index.tsx

@@ -38,4 +38,6 @@ export const App: FC = () => (
   </Provider>
 );
 
+App.displayName = 'App';
+
 ReactDOM.render(<App />, document.getElementById('root'));

examples/3-ssr-with-nextjs/components/App.js

@@ -1,4 +1,4 @@
-export default ({ children }) => (
+const App = ({ children }) => (
   <main>
     {children}
     <style jsx global>{`
@@ -40,3 +40,5 @@ export default ({ children }) => (
     `}</style>
   </main>
 );
+
+export default App;

examples/3-ssr-with-nextjs/components/ErrorMessage.js

@@ -1,4 +1,4 @@
-export default ({ message }) => (
+const ErrorMessage = ({ message }) => (
   <aside>
     {message}
     <style jsx>{`
@@ -11,3 +11,5 @@ export default ({ message }) => (
     `}</style>
   </aside>
 );
+
+export default ErrorMessage;

examples/3-ssr-with-nextjs/pages/index.js

@@ -2,9 +2,11 @@ import App from '../components/App';
 import Submit from '../components/Submit';
 import PostList from '../components/PostList';
 
-export default () => (
+const Root = () => (
   <App>
     <Submit />
     <PostList />
   </App>
 );
+
+export default Root;