jonniebigodes
commented
5 years ago @amlcodes i've picked up on your issue and i think i have a solution for you. I diverted a bit i used a local graphql server, but the same principle should apply. Below are the steps i took to try to solve your issue based on the information at hand.
- Added a new table on airtable, to keep it simple i emulated a blog. So with that, my columns are title,slug,author,PostMarkdown,date,published
- Added a few entries in there and my table looks like the following:
- Created a simple graphql server with
graphql-yogato test your issue with the following code:const {GraphQLServer} = require('graphql-yoga') const uuid = require('uuid')
// #region equal_items
/* let DummyItems = [
{
id: 'rec43S6g1RJSA3o6p',
title: 'Hello World',
author: 'author one',
slug: 'hello-world',
PostMarkdown:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl purus in. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Nunc aliquet bibendum enim facilisis gravida. Dolor magna eget est lorem ipsum dolor sit amet. Faucibus vitae aliquet nec ullamcorper sit. Imperdiet massa tincidunt nunc pulvinar. Varius morbi enim nunc faucibus a. Euismod quis viverra nibh cras pulvinar mattis. At elementum eu facilisis sed odio. Vitae turpis massa sed elementum tempus egestas. Senectus et netus et malesuada fames ac turpis. Sed ullamcorper morbi tincidunt ornare massa eget.\n\nEu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Aliquam id diam maecenas ultricies mi. Auctor eu augue ut lectus arcu. Non diam phasellus vestibulum lorem sed risus. Euismod lacinia at quis risus sed vulputate odio ut enim. Lacus laoreet non curabitur gravida arcu ac tortor dignissim. Cum sociis natoque penatibus et magnis. Diam sollicitudin tempor id eu nisl nunc mi. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Habitant morbi tristique senectus et netus et malesuada fames ac. Eu scelerisque felis imperdiet proin.\n\nDuis at consectetur lorem donec massa sapien faucibus et. Eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo. Non nisi est sit amet facilisis magna etiam tempor. Leo vel fringilla est ullamcorper eget nulla facilisi. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Aliquam id diam maecenas ultricies mi eget mauris pharetra. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Sed faucibus turpis in eu mi bibendum neque egestas congue. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Varius sit amet mattis vulputate enim nulla aliquet. Donec adipiscing tristique risus nec feugiat in.\n\nEst placerat in egestas erat imperdiet sed. Venenatis a condimentum vitae sapien pellentesque habitant. Adipiscing enim eu turpis egestas pretium. Dui sapien eget mi proin sed. Tellus at urna condimentum mattis pellentesque id. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Odio euismod lacinia at quis risus sed vulputate odio. Amet luctus venenatis lectus magna fringilla urna. Sem viverra aliquet eget sit amet. Ultrices dui sapien eget mi proin sed libero. Enim nulla aliquet porttitor lacus. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Vulputate eu scelerisque felis imperdiet proin. Eget nunc scelerisque viverra mauris in. Sagittis id consectetur purus ut. Aliquam faucibus purus in massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Leo urna molestie at elementum eu facilisis sed. Vitae ultricies leo integer malesuada.\n\nMauris rhoncus aenean vel elit scelerisque. Imperdiet dui accumsan sit amet. Montes nascetur ridiculus mus mauris vitae ultricies. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Bibendum at varius vel pharetra. Dignissim sodales ut eu sem integer vitae justo eget magna. Viverra aliquet eget sit amet tellus cras adipiscing. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Consequat interdum varius sit amet mattis. Velit egestas dui id ornare. Condimentum vitae sapien pellentesque habitant morbi tristique. Nam aliquam sem et tortor consequat id porta nibh.',
date: '30 March,2019',
published: 'true'
},
{
id: 'recEqo8AiDjbD7zNx',
title: 'kebab',
author: 'author three',
slug: 'hum-kebab-hum',
PostMarkdown:
'i really would go fro a kebab.....insert homer simpson sound here',
date: '30 March,2019',
published: 'true'
},
{
id: 'recHFEEejGw9rRDtZ',
title: 'another',
author: 'author three',
slug: 'another',
PostMarkdown:
'Cupcake ipsum dolor sit amet tiramisu biscuit. Jelly beans liquorice cheesecake candy canes marshmallow. I love I love tootsie roll brownie oat cake lollipop gummies. Muffin toffee jelly beans sweet cookie I love cotton candy. Cake I love soufflé. Tiramisu pudding pie tootsie roll apple pie topping I love. Candy canes I love jelly beans marzipan chocolate bar. Chupa chups sweet cake powder halvah.\n\nDanish cupcake jelly beans tootsie roll I love sweet I love marzipan gummi bears. Wafer muffin muffin bear claw topping. Sweet dessert halvah jelly beans tiramisu wafer I love chupa chups tart. I love wafer chocolate cake brownie marzipan marzipan. Danish cupcake soufflé I love jelly chocolate bar wafer pie. Candy lemon drops biscuit I love I love I love powder. Wafer donut chocolate cake cookie gummi bears cake bonbon danish apple pie. Toffee pie biscuit marshmallow.\n\nGummi bears ice cream chupa chups jelly beans. I love croissant bonbon jelly icing. Croissant marshmallow dessert candy canes brownie gummies brownie tootsie roll sesame snaps. Jelly beans I love I love. I love tootsie roll wafer biscuit pastry toffee chocolate I love. Pudding sweet roll lemon drops cotton candy I love brownie dragée. Sweet roll fruitcake dessert muffin pie cookie lemon drops.\n\nJelly beans cupcake lollipop dessert I love tiramisu. Cotton candy cheesecake marzipan I love sweet roll pudding toffee. Chocolate cake croissant lemon drops carrot cake gummi bears pudding. Brownie tootsie roll I love. Tootsie roll jelly-o sweet cookie. Jelly-o sesame snaps lemon drops chupa chups. Tart gummies gummies lemon drops biscuit. Bear claw biscuit sweet roll I love bear claw sweet roll bonbon croissant cake. Cotton candy liquorice apple pie candy lollipop macaroon soufflé chocolate cake.\n\nChocolate cake chocolate cake cookie sweet roll cotton candy tiramisu cupcake tootsie roll I love. I love I love wafer cupcake croissant wafer fruitcake topping. Tart ice cream tart bonbon sweet. Soufflé apple pie candy toffee. Jujubes I love I love. Sugar plum gummies bear claw chupa chups carrot cake gummi bears ice cream chocolate candy. Soufflé jujubes I love candy pie.',
date: '30 March,2019',
published: 'true'
},
{
id: 'recMHYUT6cC1YjdvE',
title: 'one more',
author: 'author one',
slug: 'one-more-item',
PostMarkdown: Lorem ipsum dolor amet shoreditch echo park gastropub pok pok truffaut. Put a bird on it narwhal waistcoat, hashtag four dollar toast synth heirloom thundercats raclette yr quinoa hexagon you probably haven't heard of them freegan humblebrag. Keytar shaman flexitarian man bun, air plant mustache kogi shoreditch. Shaman plaid YOLO cold-pressed organic cred green juice chia tumblr locavore. Normcore taiyaki coloring book, vaporware yuccie quinoa mustache waistcoat irony bespoke iceland. YOLO offal raw denim, single-origin coffee cold-pressed asymmetrical messenger bag tofu coloring book roof party meggings put a bird on it vaporware brunch tousled.\n\nSelfies YOLO jean shorts tumeric irony. Authentic crucifix everyday carry jianbing distillery, banh mi drinking vinegar hot chicken. Occupy chambray iceland XOXO kinfolk. Portland tilde selvage subway tile, forage sartorial narwhal intelligentsia af gastropub cloud bread distillery farm-to-table aesthetic. Distillery fingerstache church-key green juice, coloring book semiotics migas chillwave shoreditch VHS. Hell of brooklyn narwhal, mumblecore you probably haven't heard of them master cleanse small batch listicle swag tbh skateboard whatever poutine. Messenger bag etsy cardigan bitters, man braid blog selfies stumptown.\n\nTrust fund biodiesel beard meh, yr pitchfork fanny pack activated charcoal poke enamel pin pickled twee ethical brooklyn. Schlitz 8-bit pickled man braid. Williamsburg lyft pug tilde flexitarian prism woke. Swag tbh tumeric, snackwave truffaut distillery crucifix. Before they sold out narwhal 90's seitan, messenger bag swag raw denim chartreuse chicharrones organic trust fund tumeric single-origin coffee vinyl jianbing. Celiac enamel pin franzen, trust fund meggings echo park mixtape snackwave scenester quinoa migas meh. Lo-fi live-edge PBR&B, hot chicken squid messenger bag kinfolk.\n\nSquid pour-over photo booth blog crucifix cray venmo meggings cloud bread. Intelligentsia quinoa organic crucifix. +1 actually enamel pin migas. YOLO fam next level, vape offal swag chartreuse affogato pinterest tofu lyft man bun sartorial irony migas. PBR&B palo santo portland, four loko artisan ramps distillery chicharrones beard leggings 8-bit. Tofu church-key man bun waistcoat succulents.\n\nDreamcatcher distillery you probably haven't heard of them small batch, pug godard schlitz vexillologist. Readymade swag cronut bespoke sustainable offal, kogi gentrify fam. Pinterest palo santo waistcoat truffaut small batch vexillologist knausgaard banjo leggings. Knausgaard tbh hashtag slow-carb adaptogen enamel pin, craft beer ramps venmo hoodie disrupt typewriter raw denim roof party. Mlkshk brooklyn etsy neutra four loko wolf cloud bread. Meggings kickstarter pug dreamcatcher brooklyn celiac portland tacos butcher microdosing trust fund semiotics deep v retro yr. Unicorn post-ironic vegan aesthetic knausgaard brooklyn forage poutine.\n\nOh. You need a little dummy text for your mockup? How quaint.\n\nI bet you’re still using Bootstrap too…,
date: '30 March,2019',
published: 'true'
},
{
id: 'recMgBOZY1chgHVbf',
title: 'super duper airtable',
author: 'author one',
slug: 'a-post-from-airtable',
PostMarkdown: this is similar to a blog post using markdown but using airtable,
date: '30 March,2019',
published: 'true'
},
{
id: 'recf5p80bic7bEtun',
title: 'cucumber',
author: 'author two',
slug: 'a-cucumber',
PostMarkdown: Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.\n\nGumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.\n\nTurnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.\n\nNori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.\n\nCelery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.,
date: '30 March,2019',
published: 'true'
},
{
id: 'rechC9H4FLsSb5Ipe',
title: 'donuts',
author: 'author one',
slug: 'donuts',
PostMarkdown: 'donuts...sweet....sweet donuts',
date: '30 March,2019',
published: 'true'
},
{
id: 'recoyhzq47SC8gvFw',
title: 'banana',
author: 'author one',
slug: 'a-banana',
PostMarkdown: 'a banana is super duper fantastic',
date: '30 March,2019',
published: 'true'
},
{
id: 'recxGZcSxm72Dtt6v',
title: 'strongest',
author: 'author two',
slug: 'chucknorriums',
PostMarkdown: Spicy jalapeno bacon ipsum dolor amet landjaeger pork alcatra corned beef ribeye. Cupim landjaeger shoulder flank salami ham hock bresaola fatback short loin tongue tenderloin shank meatball porchetta buffalo. Salami short ribs bresaola tri-tip landjaeger, pork loin chicken tongue ball tip frankfurter spare ribs sausage pancetta. Hamburger kevin flank tri-tip boudin. Jowl capicola landjaeger, pastrami prosciutto fatback pork loin tenderloin shoulder andouille boudin pig ham hock strip steak. Spare ribs short loin tenderloin, hamburger burgdoggen turkey jerky meatloaf pig tail capicola ham hock leberkas chicken frankfurter.\n\nPastrami pancetta pork loin ham burgdoggen strip steak venison boudin shank shoulder shankle doner. Tenderloin strip steak burgdoggen brisket. Porchetta chuck flank, bresaola andouille kevin tenderloin shoulder ham rump short loin buffalo bacon cupim turkey. Hamburger picanha pastrami brisket. Sirloin ham capicola corned beef prosciutto chuck alcatra tri-tip pork belly beef drumstick hamburger. Filet mignon pork sausage cupim brisket pork belly.\n\nPicanha ham hock andouille, pork chicken t-bone pork belly ground round bresaola rump kielbasa swine chuck landjaeger venison. Kevin buffalo rump ham, jerky porchetta sirloin salami hamburger tenderloin chuck short ribs ball tip pork. Shankle tail strip steak boudin picanha doner porchetta buffalo. Ground round drumstick landjaeger pancetta beef sirloin. Meatloaf pastrami kevin prosciutto, rump flank picanha jerky brisket fatback tenderloin burgdoggen tri-tip porchetta ham hock. Tri-tip meatloaf swine spare ribs, bacon flank buffalo prosciutto cupim porchetta drumstick pancetta.\n\nShort ribs rump salami pork loin kielbasa ribeye shoulder corned beef tenderloin tail. Picanha shankle rump kielbasa. Ball tip andouille strip steak tenderloin, cupim beef ribs biltong. Corned beef prosciutto tenderloin kielbasa. Tri-tip hamburger meatball, beef ribs pork belly drumstick ball tip biltong ground round bresaola fatback brisket picanha prosciutto pastrami. Capicola ribeye bacon pork loin, spare ribs turkey fatback venison prosciutto drumstick brisket landjaeger. Buffalo burgdoggen meatloaf, short ribs flank brisket swine.\n\nBuffalo tongue pork, short ribs andouille salami burgdoggen hamburger alcatra biltong tenderloin jerky drumstick kielbasa. Tongue andouille t-bone, sirloin turducken chicken pork loin brisket fatback pork belly. Swine chicken beef ribs ground round pork belly picanha spare ribs fatback burgdoggen ribeye pig andouille drumstick. Sausage shank leberkas, hamburger shankle pork beef salami meatloaf.\n\nDoes your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!,
date: '30 March,2019',
published: 'true'
},
{
id: 'recziDEeUE7gg69KT',
title: 'batman villains',
author: 'author one',
slug: 'batman-villains',
PostMarkdown: batman....nananananananana....batman....,
date: '30 March,2019',
published: 'true'
}
] */
// #endregion
//#region not_equal_items
let DummyItems = [
{
id: 'rec43S6g1RJSA3o6p',
title: 'Hello World',
author: 'author one',
slug: 'hello-world',
PostMarkdown:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl purus in. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Nunc aliquet bibendum enim facilisis gravida. Dolor magna eget est lorem ipsum dolor sit amet. Faucibus vitae aliquet nec ullamcorper sit. Imperdiet massa tincidunt nunc pulvinar. Varius morbi enim nunc faucibus a. Euismod quis viverra nibh cras pulvinar mattis. At elementum eu facilisis sed odio. Vitae turpis massa sed elementum tempus egestas. Senectus et netus et malesuada fames ac turpis. Sed ullamcorper morbi tincidunt ornare massa eget.\n\nEu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Aliquam id diam maecenas ultricies mi. Auctor eu augue ut lectus arcu. Non diam phasellus vestibulum lorem sed risus. Euismod lacinia at quis risus sed vulputate odio ut enim. Lacus laoreet non curabitur gravida arcu ac tortor dignissim. Cum sociis natoque penatibus et magnis. Diam sollicitudin tempor id eu nisl nunc mi. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Habitant morbi tristique senectus et netus et malesuada fames ac. Eu scelerisque felis imperdiet proin.\n\nDuis at consectetur lorem donec massa sapien faucibus et. Eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo. Non nisi est sit amet facilisis magna etiam tempor. Leo vel fringilla est ullamcorper eget nulla facilisi. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Aliquam id diam maecenas ultricies mi eget mauris pharetra. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Sed faucibus turpis in eu mi bibendum neque egestas congue. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Varius sit amet mattis vulputate enim nulla aliquet. Donec adipiscing tristique risus nec feugiat in.\n\nEst placerat in egestas erat imperdiet sed. Venenatis a condimentum vitae sapien pellentesque habitant. Adipiscing enim eu turpis egestas pretium. Dui sapien eget mi proin sed. Tellus at urna condimentum mattis pellentesque id. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Odio euismod lacinia at quis risus sed vulputate odio. Amet luctus venenatis lectus magna fringilla urna. Sem viverra aliquet eget sit amet. Ultrices dui sapien eget mi proin sed libero. Enim nulla aliquet porttitor lacus. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Vulputate eu scelerisque felis imperdiet proin. Eget nunc scelerisque viverra mauris in. Sagittis id consectetur purus ut. Aliquam faucibus purus in massa. Orci sagittis eu volutpat odio facilisis mauris sit amet. Leo urna molestie at elementum eu facilisis sed. Vitae ultricies leo integer malesuada.\n\nMauris rhoncus aenean vel elit scelerisque. Imperdiet dui accumsan sit amet. Montes nascetur ridiculus mus mauris vitae ultricies. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Bibendum at varius vel pharetra. Dignissim sodales ut eu sem integer vitae justo eget magna. Viverra aliquet eget sit amet tellus cras adipiscing. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Consequat interdum varius sit amet mattis. Velit egestas dui id ornare. Condimentum vitae sapien pellentesque habitant morbi tristique. Nam aliquam sem et tortor consequat id porta nibh.',
date: '30 March,2019',
published: 'true'
},
{
id: 'recEqo8AiDjbD7zNx',
title: 'kebab',
author: 'author three',
slug: 'hum-kebab-hum',
PostMarkdown:
'i really would go fro a kebab.....insert homer simpson sound here',
date: '30 March,2019',
published: 'true'
},
{
id: 'recHFEEejGw9rRDtZ',
title: 'another',
author: 'author three',
slug: 'another',
PostMarkdown:
'Cupcake ipsum dolor sit amet tiramisu biscuit. Jelly beans liquorice cheesecake candy canes marshmallow. I love I love tootsie roll brownie oat cake lollipop gummies. Muffin toffee jelly beans sweet cookie I love cotton candy. Cake I love soufflé. Tiramisu pudding pie tootsie roll apple pie topping I love. Candy canes I love jelly beans marzipan chocolate bar. Chupa chups sweet cake powder halvah.\n\nDanish cupcake jelly beans tootsie roll I love sweet I love marzipan gummi bears. Wafer muffin muffin bear claw topping. Sweet dessert halvah jelly beans tiramisu wafer I love chupa chups tart. I love wafer chocolate cake brownie marzipan marzipan. Danish cupcake soufflé I love jelly chocolate bar wafer pie. Candy lemon drops biscuit I love I love I love powder. Wafer donut chocolate cake cookie gummi bears cake bonbon danish apple pie. Toffee pie biscuit marshmallow.\n\nGummi bears ice cream chupa chups jelly beans. I love croissant bonbon jelly icing. Croissant marshmallow dessert candy canes brownie gummies brownie tootsie roll sesame snaps. Jelly beans I love I love. I love tootsie roll wafer biscuit pastry toffee chocolate I love. Pudding sweet roll lemon drops cotton candy I love brownie dragée. Sweet roll fruitcake dessert muffin pie cookie lemon drops.\n\nJelly beans cupcake lollipop dessert I love tiramisu. Cotton candy cheesecake marzipan I love sweet roll pudding toffee. Chocolate cake croissant lemon drops carrot cake gummi bears pudding. Brownie tootsie roll I love. Tootsie roll jelly-o sweet cookie. Jelly-o sesame snaps lemon drops chupa chups. Tart gummies gummies lemon drops biscuit. Bear claw biscuit sweet roll I love bear claw sweet roll bonbon croissant cake. Cotton candy liquorice apple pie candy lollipop macaroon soufflé chocolate cake.\n\nChocolate cake chocolate cake cookie sweet roll cotton candy tiramisu cupcake tootsie roll I love. I love I love wafer cupcake croissant wafer fruitcake topping. Tart ice cream tart bonbon sweet. Soufflé apple pie candy toffee. Jujubes I love I love. Sugar plum gummies bear claw chupa chups carrot cake gummi bears ice cream chocolate candy. Soufflé jujubes I love candy pie.',
date: '30 March,2019',
published: 'true'
},
{
id: 'recMHYUT6cC1YjdvE',
title: 'one more',
author: 'author one',
slug: 'one-more-item',
PostMarkdown: Lorem ipsum dolor amet shoreditch echo park gastropub pok pok truffaut. Put a bird on it narwhal waistcoat, hashtag four dollar toast synth heirloom thundercats raclette yr quinoa hexagon you probably haven't heard of them freegan humblebrag. Keytar shaman flexitarian man bun, air plant mustache kogi shoreditch. Shaman plaid YOLO cold-pressed organic cred green juice chia tumblr locavore. Normcore taiyaki coloring book, vaporware yuccie quinoa mustache waistcoat irony bespoke iceland. YOLO offal raw denim, single-origin coffee cold-pressed asymmetrical messenger bag tofu coloring book roof party meggings put a bird on it vaporware brunch tousled.\n\nSelfies YOLO jean shorts tumeric irony. Authentic crucifix everyday carry jianbing distillery, banh mi drinking vinegar hot chicken. Occupy chambray iceland XOXO kinfolk. Portland tilde selvage subway tile, forage sartorial narwhal intelligentsia af gastropub cloud bread distillery farm-to-table aesthetic. Distillery fingerstache church-key green juice, coloring book semiotics migas chillwave shoreditch VHS. Hell of brooklyn narwhal, mumblecore you probably haven't heard of them master cleanse small batch listicle swag tbh skateboard whatever poutine. Messenger bag etsy cardigan bitters, man braid blog selfies stumptown.\n\nTrust fund biodiesel beard meh, yr pitchfork fanny pack activated charcoal poke enamel pin pickled twee ethical brooklyn. Schlitz 8-bit pickled man braid. Williamsburg lyft pug tilde flexitarian prism woke. Swag tbh tumeric, snackwave truffaut distillery crucifix. Before they sold out narwhal 90's seitan, messenger bag swag raw denim chartreuse chicharrones organic trust fund tumeric single-origin coffee vinyl jianbing. Celiac enamel pin franzen, trust fund meggings echo park mixtape snackwave scenester quinoa migas meh. Lo-fi live-edge PBR&B, hot chicken squid messenger bag kinfolk.\n\nSquid pour-over photo booth blog crucifix cray venmo meggings cloud bread. Intelligentsia quinoa organic crucifix. +1 actually enamel pin migas. YOLO fam next level, vape offal swag chartreuse affogato pinterest tofu lyft man bun sartorial irony migas. PBR&B palo santo portland, four loko artisan ramps distillery chicharrones beard leggings 8-bit. Tofu church-key man bun waistcoat succulents.\n\nDreamcatcher distillery you probably haven't heard of them small batch, pug godard schlitz vexillologist. Readymade swag cronut bespoke sustainable offal, kogi gentrify fam. Pinterest palo santo waistcoat truffaut small batch vexillologist knausgaard banjo leggings. Knausgaard tbh hashtag slow-carb adaptogen enamel pin, craft beer ramps venmo hoodie disrupt typewriter raw denim roof party. Mlkshk brooklyn etsy neutra four loko wolf cloud bread. Meggings kickstarter pug dreamcatcher brooklyn celiac portland tacos butcher microdosing trust fund semiotics deep v retro yr. Unicorn post-ironic vegan aesthetic knausgaard brooklyn forage poutine.\n\nOh. You need a little dummy text for your mockup? How quaint.\n\nI bet you’re still using Bootstrap too…,
date: '30 March,2019',
published: 'true'
},
{
id: 'recMgBOZY1chgHVbf',
title: 'super duper airtable',
author: 'author one',
slug: 'a-post-from-airtable',
PostMarkdown: this is similar to a blog post using markdown but using airtable,
date: '30 March,2019',
published: 'true'
},
{
id: 'recf5p80bic7bEtun',
title: 'cucumber',
author: 'author two',
slug: 'a-cucumber',
PostMarkdown: Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.\n\nGumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.\n\nTurnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.\n\nNori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.\n\nCelery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.,
date: '30 March,2019',
published: 'true'
},
{
id: 'recxGZcSxm72Dtt6v',
title: 'strongest',
author: 'author two',
slug: 'chucknorriums',
PostMarkdown: Spicy jalapeno bacon ipsum dolor amet landjaeger pork alcatra corned beef ribeye. Cupim landjaeger shoulder flank salami ham hock bresaola fatback short loin tongue tenderloin shank meatball porchetta buffalo. Salami short ribs bresaola tri-tip landjaeger, pork loin chicken tongue ball tip frankfurter spare ribs sausage pancetta. Hamburger kevin flank tri-tip boudin. Jowl capicola landjaeger, pastrami prosciutto fatback pork loin tenderloin shoulder andouille boudin pig ham hock strip steak. Spare ribs short loin tenderloin, hamburger burgdoggen turkey jerky meatloaf pig tail capicola ham hock leberkas chicken frankfurter.\n\nPastrami pancetta pork loin ham burgdoggen strip steak venison boudin shank shoulder shankle doner. Tenderloin strip steak burgdoggen brisket. Porchetta chuck flank, bresaola andouille kevin tenderloin shoulder ham rump short loin buffalo bacon cupim turkey. Hamburger picanha pastrami brisket. Sirloin ham capicola corned beef prosciutto chuck alcatra tri-tip pork belly beef drumstick hamburger. Filet mignon pork sausage cupim brisket pork belly.\n\nPicanha ham hock andouille, pork chicken t-bone pork belly ground round bresaola rump kielbasa swine chuck landjaeger venison. Kevin buffalo rump ham, jerky porchetta sirloin salami hamburger tenderloin chuck short ribs ball tip pork. Shankle tail strip steak boudin picanha doner porchetta buffalo. Ground round drumstick landjaeger pancetta beef sirloin. Meatloaf pastrami kevin prosciutto, rump flank picanha jerky brisket fatback tenderloin burgdoggen tri-tip porchetta ham hock. Tri-tip meatloaf swine spare ribs, bacon flank buffalo prosciutto cupim porchetta drumstick pancetta.\n\nShort ribs rump salami pork loin kielbasa ribeye shoulder corned beef tenderloin tail. Picanha shankle rump kielbasa. Ball tip andouille strip steak tenderloin, cupim beef ribs biltong. Corned beef prosciutto tenderloin kielbasa. Tri-tip hamburger meatball, beef ribs pork belly drumstick ball tip biltong ground round bresaola fatback brisket picanha prosciutto pastrami. Capicola ribeye bacon pork loin, spare ribs turkey fatback venison prosciutto drumstick brisket landjaeger. Buffalo burgdoggen meatloaf, short ribs flank brisket swine.\n\nBuffalo tongue pork, short ribs andouille salami burgdoggen hamburger alcatra biltong tenderloin jerky drumstick kielbasa. Tongue andouille t-bone, sirloin turducken chicken pork loin brisket fatback pork belly. Swine chicken beef ribs ground round pork belly picanha spare ribs fatback burgdoggen ribeye pig andouille drumstick. Sausage shank leberkas, hamburger shankle pork beef salami meatloaf.\n\nDoes your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!,
date: '30 March,2019',
published: 'true'
},
{
id: 'recziDEeUE7gg69KT',
title: 'batman villains',
author: 'author one',
slug: 'batman-villains',
PostMarkdown: batman....nananananananana....batman....,
date: '30 March,2019',
published: 'true'
}
]
//#endregion
const typeDefs = `
type Item {
id:String!
title:String!
author:String!
slug:String!
PostMarkdown: String!
date:String!
published:String!
}
type Query{
allitems:[Item!]!
}
type Mutation{
createItem(title:String!, author:String!,slug:String!,PostMarkdown:String!,date:String!,published:String!):Item!
}
` const resolvers = { Query: { allitems: () => { return DummyItems } }, Mutation: { createItem: (_, {title, author, slug, PostMarkdown, date, published}) => { const newItem = { id: uuid.v4(), title, author, slug, PostMarkdown, date, published } DummyItems = [...DummyItems, newItem] return newItem } } }
const options = {port: 4000}
const server = new GraphQLServer({typeDefs, resolvers})
server.start(options, () =>
console.log(Server is running on localhost:${options.port})
)
As you can see it's a pretty straightforward server with one query that returns all items and a mutation to add a item to the existing ones.
- Created a new gatsby website based on the `hello world` starter just to keep things simple.
- Added some extra dependencies, namely `gatsby-source-airtable`, `gatsby-source-graphql` and `graphql-request`,this last one is a minimal graphql client. Some documentation on how to use it is [here](https://github.com/prisma/graphql-request)
- Modified `gatsby-config.js` to "activate" both plugins added, transfoming it's contents into:
```javascript
module.exports = {
plugins: [
{
resolve: `gatsby-source-airtable`,
options: {
apiKey: `myapikey`,
tables: [
{
baseId: `baseid_airtable`,
tableName: `blog-airtable`,
},
],
},
},
{
// configures the plugin to introspect the data schema on my server
resolve: `gatsby-source-graphql`,
options: {
typeName: "Item",
fieldName: "item",
url: "http://localhost:4000",
},
},
],
}- Modified
gatsby-node-jsto the following:const { request, GraphQLClient } = require("graphql-request")
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions
return graphql(
{ AirtableItems: allAirtable { edges { node { recordId data { title author slug PostMarkdown date(formatString: "DD MMMM,YYYY") published } } } } DummyItems: item { allitems { id title author slug PostMarkdown date published } } }
).then(result => {
if (result.errors) {
throw result.errors
}
const { data } = result
const { AirtableItems, DummyItems } = data
const { edges } = AirtableItems
const { allitems } = DummyItems
if (edges.length !== allitems.length) {
const difarrays = [edges, allitems]
.sort((a, b) => b.length - a.length)
.reduce((a, b) => a.filter(o => !b.some(v => v.id === o.node.recordId)))
const MergeDummy = difarrays.map(item => {
return request(
"http://localhost:4000",
`
mutation{
createItem(title:"${item.node.data.title}" author:"${
item.node.data.author
}" slug:"${item.node.data.slug}" PostMarkdown:"${
item.node.PostMarkdown
}" date:"${item.node.data.date}" published:"${item.node.data.published}"){id}
}
`
)
})
Promise.all(MergeDummy)
.then(result => {
console.log("====================================")
console.log(
`Update Dummy server result:${JSON.stringify(result, null, 2)}`
)
console.log("====================================")
})
.catch(err => {
throw err
})
}
edges.forEach(element => {
createPage({
path: `/${element.node.data.slug}/`,
component: require.resolve("./src/templates/article.js"),
context: {
title: element.node.data.title,
author: element.node.data.author,
content: element.node.data.PostMarkdown,
publishedDate: element.node.data.date,
},
})
})}) }
Key things to take from this code block:
1. In one go, or in one graphql request i fech the airtable data and my server data.
2. Based on your description, i take it that the "source of truth" is the airtable data that is returned. So with that in mind i compare the lenght of both arrays of data. If they are not equal, i populate the `difarrays ` array with the diference between them.
3. The data above is then iterated and based on each item inside a request to my server with the mutation to add the item is then called.
Moving on.
- For each item inside the edges array that is returned from querying the airtable data a new page is created with some data passed through the special property `context`.
- Created a template called `article.js` to consume the data with the following code:
```javascript
import React from 'react';
const AirTableArticle=props=>{
const {pageContext}= props
const {title,author,content,publishedDate}= pageContext
return (
<div style={{ maxWidth: `960px`, margin: `1.45rem` }}>
<h2>{title}</h2>
<hr/>
<div>{content}</div>
<div>
<h4>publised by {author} in: {publishedDate}</h4>
</div>
</div>
)
}
export default AirTableArticleIssuing gatsby develop and opening up a browser window for instance to http://localhost:8000/batman-villains shows me the page with the data rendered.
Now, i'm perfectly aware that i'm basing this comment and reproduction on a local server. But adapting this to appsync should not be to hard to implement. Just a matter of applying some modifications to the code i provided.
Feel free to provide feedback so that we can close this issue or continue to work on it.
amlcodes
in gatsby-node, I am querying airtable. I want to also query my appsync api to see if my airtable data is in the database.
here is my gatsby-node that creates all the pages in the airtable. Like I said, before createPage is ran, I would like to run a query and then a post / mutation if the airtable data is not in the appsync response.