...

/

Exercise: GraphQL Queries

Exercise: GraphQL Queries

Practice implementing and using queries with Apollo Client in a React application.

We'll cover the following...

Now, let’s practice our newly acquired skills and integrate the React frontend with two more GraphQL queries.

In the first part of this exercise, we’ll implement a new component that displays products from a particular category. In the second part, we’ll implement fetching a list of categories to initialize and create a new product form.

Exercise source code

To get the source code for this exercise run the following command in the project’s repository:

git checkout frontend-queries-exercise

Starting the project

Before we start, here’s a brief reminder of how to start all the components for the application. We need to start three different processes: the database, the GraphQL server, and the React development server.

 �F )   95@@ �n�PNG


IHDR(-S�PLTE""""""""""""""""""2PX=r�)7;*:>H��-BGE��8do5Xb6[eK��K��1MU9gs3S\I��:gt'03@{�V��T��A}�V��@y�6\fH��-CII��E��+;@7_i7_jF��J��K��H��-BHa��,@FC��L��&.0W��N��I��$)+B��J��R��?v�>s�>u�S��=qP��P��P��,?D4U^%+-M��K��%+,2OX+<AL��#&&D��%,.I��v�T�tRNSI��J�e�e��IDATxM��ZEA��ٳ	��%R����TTh�G��,���=���m�f�mnf�A�$�>!�g��Hg��Eߏܵ}	ݻ����kd���Jo���3�L"J������Q�$��ļff�,�5i9̟�H�/mB��w��w;D
�+&�W����D�o@ʴRI��B�om.۳�IEND�B`��PNG


IHDRש��ePLTE""""""""""""""""""""""""2RZN��J��3R[J��)59Y��0KS4W`Q��L��%+-0JR)6::gtC��"##?v�U��?w�<n{&-/Y��=q:iuB�A}�A{�B��/IPP��=q�K��_��L��$();lzR��a��I��Z��3U^1MU3T]Z��I��X��F��-BGP��6[e,@E5ZdO��-BHX��+=AW��,@FW��Q��?v�W��+<A@y�"#$\��4Wa\��S��$(*.EL^��V��6]h#$%G��#&';jwV��-CIL��Z��^��>u�S��/HNM��_��\��M��8doD��D��>t�+=B[��,>C>t�<o}@y�0LS.EKT��$'(%,.A~�W��C��%+,\��C!�tRNS����G��OIDATxl��B�Q��u��_ȳ<���ve�����a6Aξ��v�{@�E'�dI�!��� �C��T��g1�E(��SQs�i
ď�Z��V��)�g!��h��t�-i}���<�?��lBZaĴ4{D�⌻_e8�yǁ��3�)��?�f;8.��t�=�;	:�52fKZ�l��ؚ�9.�#��A�q�����V��`=$��?_����qM�.�J$
?^q���ۏ�.},��s��_TttԾ1#�/(�-[��`��`�����Zd5����?�ebZ�ވi.���q΄+1�}Œ5���d�G���IEND�B`��PNG


IHDR  D���APLTE"""""""""""""""""""""""""""2RZV��_��U��=r�$()'25]��C��0LS<o}X��X��0JQ=p~D��<n{V��E��8do_��E��F��H��9dp_��H��I��F��6[e`��`��L��/GM_��U��'02P��/IPP��X��&/1;ly3R[`��G��T��\��a��1OW"##Q��a��R��=q�`��.EL+=AT��-CIK��#&'C��^��I��&.04U^^��@y�Z��$(*[��^��,?DR��"#$1NV1MTD��>u�;kxG��R��/HN&-/@y�>s�>t�@z�]��P��$'(D��]��<n|0JRU���\�	tRNS%��'��(�~����IDATx���C1F_ݿMm۶4�m{���n����	�A$��$b� He��T�W��h��h�:PtZ
Q�0@.`��`4�-V`�Z�&�A�#��bk������>.''�`C$F��	�(�x"6X�c�T��L�@I�;dd-�|�P,Ȕ9�R���f3��F�VmM�X�����@Y�7����N�=����ʪu
}֬�+�e�aiq ��76����=h
�Z���l��}�ʱ�[F�I9A�k9�����3��9Ρ�qB~��b���U_�^��[��w��{z�v�z��(��(��(����f�q��G���k���Y���f���~�:*4�Q\O>�����<ד�W���Z|ދ�7���jT���n�����`$H�+�GO���*�x����X*|�^�dIEND�B`��PNG


IHDR@@����:PLTE"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%+-@y�W��`��^��S��C��,>C*8<X��a��a��M��+<Aa��X��#%%T��L��=q>u�K��`��A}�L��8do=r�%+,@y�^��S��)59=q�P��U��"#$P��\��0JQQ��"##U��#&&_��>t�>s�`��_��5Yc1OW5Zd1NV+=B1MU+;@/GM\��*;?3S\)8<2RZ_��+=A]��,@F,@E&-/0KS7alO��9dp8amB~�E��P��N��'023T]]��?x�3U^C��6\gU��&.0D��7_iR��H��I��M��$(*?v�Z��X��-AG#$%[��8co[��W��C��'25?v�8bn%*+L��N��2PX)7;=p~(58^��P��4WaQ��T��0JRQ��T��I��6]hR��T��0LSF��9eqE��E��9gsF��C��#&'\��`��&/16\fB��A{�R��]��(47%,.*:>*9=9fr:gt7^iU��?w�Z��X��^��Q��H��)6:V��'034U^E��.EL.FMK��@z�S�tRNS*�������	���+����Ԑ,����=V�IDATx�˵C!��C|���^yR]�M��O]����0N�2����"���(0V�(�Y%PDT-~(m��!�K�Y�~���I�f{����a����3��Op&�Ф��x��#�j��ڶm�m��c)]m����)Ƨgf�hk���Ҡ�gg�Ǚ���+X���uiyVת�k���\[�:,�6��jIJ
;�"�;��X���f�������S����8=�o�;���(���ӥBk�e��\7p+m����N�<��Q�O������y�g�tt��o������V����s������&_�a���V~��?�*8��Q ;8��,���f���1�x��ק�*���A���a#����#�nP�i+��C�,�����_�Nb��ø��H�B*�Ҧ �L(^<�Á�L6pJ�P������%"�R,�9�e3eR�a1�(
��q�8َ��mK˱mƶm���yi!�ΪY�u���_��?i���+���A|�{���?��_En).J�D�<�
���Z\Ts�R*(	��J���uX/
4J9��5�DE�4k�4�&i�V4������vsf:�g,���BC��$�����@�I_?<�!^���ӽ����B�%L�w�FD1���(F���H�%0����؄(�0���'���N.0u�@�Y�PW�I�aN�K���?�ӵ�=�e�v/c����0c0�2��:�06R-u�ĭ\Q̶�䴼�6R#
�F��6��rՁ��u��m�����I�i~ ����ÏsP�"��
eiy��P����򒧡���,S]U��V��֔��Z��o���xz���Snm�{ںwaل��Ż���(mg/��������[�b��q��&կ��$�zȊ�H>a�KT1/��1O��0�.h͇Y�A���
-�>ۋ���Xբ�}ߨ���;��N��v���θ�1����O@&v/��_��\��\�.��+0�;!f����%� JY�O�Ž'/�]_�;��'"&N�n	aQ�^�cx�A��IEND�B`�
Practice demo

First, we need to start a container with a MongoDB database.

cd server
npm run db:up

We also have the option to replace data ...