GatsbyJS, linking related items from CMS data using GraphQL - javascript

I am more of a beginner with graphql and a bit confused between learning the basics and how Gatsby uses it to import all data for its static site needs. And wanted to know what might be best practice when it comes to my situation.
I have two content types setup in GraphCMS. {Content type A} links to {Content type B} in a one to many relationship. And in my site I have a few places where I want a list of A that shows the links to B in them and visa versa.
I would love any ideas on what might be the best way to go about making this data available when its imported from Graphcms on build startup/generation of pages. I could just reference all fields twice (using fragments?) in the configs query. Or do I query each the list of a and b separate and have a field reserved for their id and then in gatsby-node attach their linked items matching their ids. Alternatively it could be done at on client side but I imagine i should take full advantage of the generator tools?
Any and all help is greatly appreciated.

Related

RESTful route structure of 3 related categories in Express/Node

I am a noob designing an API for an ecommerce site and I need to work out my restful route structure. We are basically using Node and React along with Express + GraphQL. I was wondering if someone could shine a light on the structure?
Here is what we Have:
It is a fashion store that has many products: skirts, blouses, tops, shirts, dresses, etc. You know the drill.
Each of these items will be in categories like this:
/dresses (GET all dresses)
/dresses/:id (GET a particular dress)
/skirts (GET all skirts)
/skirts/:id (GET a particular skirt)
In addition to all the products and the categories of products, at the top level we have DESIGNERS.
So, you would have a designer who has many categories, and each category has many products. Make sense?
I am puzzling over how to nest the express routes.
I want to do these things....
Get all designers
Get all categories a designer has a product in
Get all products a designer has in the store
Get an individual (:id) of a product a designer has.
by the same token I also want to ...
Get all categories.
Get all products in a category
Get and individual product (:id) in a category.
So we have a parent route (designers)
and then two child routes (I think) within designers which
are /categories, /categories/:id, and /categories/products, and /categories/products/:id
Could someone get me a code hint on creating the routes in express? I am wanting to create a JSON structure to render with this
Thanks!
You're essentially asking how to build out an entire REST framework for a backend, which is quite a lengthy thing to answer :)
I'd suggest you start by designing the structure of the JSON for all these objects. Here's a handy site that allows you to visually see the layout of the JSON: https://jsoneditoronline.org/
Once you've done that for all the objects you've mentioned, here's a good tutorial on how to build basic node.js endpoints: https://medium.com/#purposenigeria/build-a-restful-api-with-node-js-and-express-js-d7e59c7a3dfb

How to make a dynamic search application in MarkLogic?

I am new to MarkLogic.
Is it possible to make a search application in such a way that when a user makes a search he/she receives the URI links of the documents along with a little bit of summary? When they click on the URI link they get to see the full document. I also want to give collection facets which will further filter the records. There are some fields that I want to use as facets, these fields are present in documents of some collections but are not present in other collections. However, these collections do have a common unique field which can be used for making joins or linking them. I want to know, how is it possible? How do we make collection facets? How do we make a join on different collections? How do we make the URI link clickable and direct the users to a full document? I want to answer questions like show me all the maintenance documents that have word 'housekeeping' in them, then I click on the names of the locations (location info could be in a different collection) to further narrow the search or I can click on the names of the employees who worked on these "housekeeping" jobs to further narrow the search. I would really appreciate your help. I built a search app just like Top-Songs from MarkLogic tutorials but it had just one collection and same XML schema for all the documents but now different collections and different XML schema are confusing to me. Please also tell me whether I should use Search API or cts:search to achieve this. Is this achievable by keeping these collections separate or do I need to denormalize them?
I would really appreciate your help.
much regards
I'd recommend having a look at slush-marklogic-node. It is a generator that creates you a complete project with a fairly full-featured search app. It comes with some JSON sample-data, and has some example facets that work with it, but you can also upload other data, and play with that, provided you put it in the 'data' collection.
It runs on a slightly outdated stack unfortunately, but it is fairly stable, and might give you good ideas on how to approach certain aspects. Once deployed properly, it should look like this:
http://slush-default.demo.marklogic.com/
Update:
Regarding facets on collections, the generated app comes with several example facets of which the first is based on collections. It is driven by the faceting capabilities of the REST endpoint /v1/search, which in turn builds on top of search:search(). That function takes so-called search options that can define constraints. Here two examples:
<!-- Facet based on document collections, simple yet elegant -->
<constraint name="Collection">
<collection facet="true" />
<!-- optionally enable a prefix to see a specific subset of facets
<collection facet="true" prefix="data/" />
-->
</constraint>
<!-- Example range facet based on the sample-data -->
<constraint name="eyeColor">
<range type="xs:string" facet="true" collation="http://marklogic.com/collation/codepoint">
<facet-option>limit=5</facet-option>
<facet-option>frequency-order</facet-option>
<facet-option>descending</facet-option>
<path-index>eyeColor</path-index>
</range>
</constraint>
See also: https://github.com/marklogic-community/slush-marklogic-node/blob/master/app/templates/rest-api/config/options/all.xml#L105
HTH!

Best way to scrape a set of pages with mixed content

I’m trying to show a list of lunch venues around the office with their today’s menus. But the problem is the websites that offer the lunch menus, don’t always offer the same kind of content.
For instance, some of the websites offer a nice JSON output. Look at this one, it offers the English/Finnish course names separately and everything I need is available. There are couple of others like this.
But others, don’t always have a nice output. Like this one. The content is laid out in plain HTML and English and Finnish food names are not exactly ordered. Also food properties like (L, VL, VS, G, etc) are just normal text like the food name.
What, in your opinion, is the best way to scrape all these available data in different formats and turn them into usable data? I tried to make a scraper with Node.js (& phantomjs, etc) but it only works with one website, and it’s not that accurate in case of the food names.
Thanks in advance.
You may use something like kimonolabs.com, they are much easier to use and they give you APIs to update your side.
Remember that they are best for tabular data contents.
There my be simple algorithmic solutions to the problem, If there is a list of all available food names this can be really helpful, you find the occurrence of a food name inside a document (for today).
If there is not any food list, You may use TF/IDF. TF/IDF allows to calculate the score of a word inside a document among the current document and also other documents. But this solution needs enough data to work.
I think the best solution is some thing like this:
Creating a list of all available websites that should be scrapped.
Writing driver classes for each website data.
Each driver has the duty of creating the general domain entity from its standard document.
If you can use PHP, Simple HTML Dom Parser along with Guzzle would be a great choice. These two will provide a jQuery like path finder and a nice wrapper arround HTTP.
You are touching really difficult problem. Unfortunately there are no easy solutions.
Actually there are two different parts to solve:
data scraping from different sources
data integration
Let's start with first problem - data scraping from different sources. In my projects I usually process data in several steps. I have dedicated scrapers for all specific sites I want, and process them in the following order:
fetch raw page (unstructured data)
extract data from page (unstructured data)
extract, convert and map data into page-specific model (fully structured data)
map data from fully structured model to common/normalized model
Steps 1-2 are scraping oriented and steps 3-4 are strictly data-extraction / data-integration oriented.
While you can easily implement steps 1-2 relatively easy using your own webscrapers or by utilizing existing web services - data integration is the most difficult part in your case. You will probably require some machine-learning techniques (shallow, domain specific Natural Language Processing) along with custom heuristics.
In case of such a messy input like this one I would process lines separately and use some dictionary to get rid Finnish/English words and analyse what has left. But in this case it will never be 100% accurate due to possibility of human-input errors.
I am also worried that you stack is not very well suited to do such tasks. For such processing I am utilizing Java/Groovy along with integration frameworks (Mule ESB / Spring Integration) in order to coordinate data processing.
In summary: it is really difficult and complex problem. I would rather assume less input data coverage than aiming to be 100% accurate (unless it is really worth it).

How can I use D3 to graph configuration items and their dependencies?

I'm a new user to D3 and am trying to think about how to best implement a mapping of our configuration items.
What I'm looking for is essentially a treemap (I think) but with inter-related dependencies.
The Data
I'm working with ITIL-style configuration items, so logical services, applications, machines, etc. that make up an IT service that we offer to our customers.
The JSON data I'd be providing is going to come from a WebAPI service that I am defining and so the data can be returned however is necessary.
The Goal
I need to get across:
The name of the configuration item ("Service A", "Server 1", "Database XYZ", etc.)
The configuration item type (represented by either an icon or color -- not too important right now)
Those things with the least dependents at the top
i.e. a service is represented by all the things that compose it -- applications, DBs, etc. and I'd like to have the hierarchy in order from services down.
The relationships between all the elements, which aren't strictly hierarchical.
Multiple services could depend on one application
Multiple applications could depend on multiple databases which could depend on one database server.
If possible, the ability to focus on one branch of the tree from top to bottom by clicking on it (though this can come way later)
Once I get my head around it, I'd like to set up something simple on GitHub and see if I can use D3 to help contribute to the world of IT Service Management.
The Question
Philosophically, is D3 designed to support a visualization of this nature, and what is my best route to accomplish it?
Thanks!

Controller and View for creating one-to-many object, both "container" and unlimited number of "content" objects?

Users will be able to write some documents. Those documents will consists of chapters (one-to-many relation).
Normally I would do this by creating separate views for creating chapter and document.
How to implement web page that allow to edit "composite" view? Where I can edit document details, but also create chapters, without visiting different pages? Also how can I ensure that I pass order of chapter user have arranged (by moving chapters freely up and down)?
(Sorry if that question already have be asked&answered but I do not even know how to search for it :| since I do not know proper keywords beyond "AJAX", so help in naming my requirement would also be welcomed!)
Backend servers applications based on REST principles work nicely with Ajax client-side implementations.
For example, your URLs could be:
/book/1
/book/1/chapters
/book/1/chapter/1
You could set it up so that a POST to /book/1/chapters would add a chapter. A GET on that same URL would return all chapters. A GET on /book/1/chapter/1/ would only return chapter 1. A PUT on /book/1/chapter/1/ would update an existing chapter. This is a "RESTful" architecture:
http://en.wikipedia.org/wiki/Representational_state_transfer
This is an interesting introduction: http://tomayko.com/writings/rest-to-my-wife
This is a big subject, but if you create the right backend server architecture you will find your job a lot easier. Hope this helps answer your question.
Ok Partial solution.
Just google Nested Forms Ruby on Rails. Plenty of examples, all in ajax, all easy.

Categories