DEV Community: TrackMyStories

How to GeoJSON with Apollo GraphQL Server

TrackMyStories — Tue, 20 Apr 2021 14:51:37 +0000

This article explains in a few simple steps how to work with GeoJSON using an Apollo GraphQL server, The primary focus is to understand the fetching of numeric properties within an array.

coordinates : [55.708, -21.244]

For this example I have utilised NASA API's : The Earth Observatory Natural Event Tracker (EONET), which is a repository of metadata about natural events.

In addition you can find the example linked here on github here.

In order to work with GeoJSON using Apollo's graphQL server we have to make use of custom scalars, because the servers backend needs to know how to interact with a data structure which includes an array example as such "[55.708, -21.244]."

Step 1:

$ npm install graphql-type-json

The following dependency defines a custom scalar object. The GraphQLJSON object is an instance of the GraphQLScalarType which can be used to define the custom scalar JSON , this will allow our server to validate our coordinates e.g. "[55.708, -21.244]."

Step 2:

In the schema.js file define the custom scalar type and link it to the coordinates:

const {gql} = require('apollo-server');
const typeDefs = gql`
  scalar JSON  // custom scalar
type Event {
    id: ID!
    cursor: ID!
    title: String
    description: String
    link: String
    closed: String
    categories: [Categories]
    sources: [Sources]
    geometry: [Geometry]
  }
type Categories {
    id: ID!
    title: String
  }
type Sources {
    id: String
    url: String
  }
type Geometry {
    magnitudeValue: String
    magnitudeUnit: String
    date: String
    type: String
    coordinates: [JSON] // coordinates 
  }
type Query {
    events: [Event!]!
  }
`;
module.exports = typeDefs;

Step 3:

In the index.js file import GraphQLJSON and add to the server constructor.

const {ApolloServer} = require('apollo-server');
const typeDefs = require('./src/schema');
const resolvers = require('./src/resolvers');
const EventsAPI = require('./src/datasources/events');
const GraphQLJSON = require('graphql-type-json');
const server = new ApolloServer({
  typeDefs,
  resolvers,
  JSON: GraphQLJSON,
  dataSources: () => ({
    eventsAPI: new EventsAPI(),
  }),
});
server.listen().then(({url}) => {
  console.log(`🚀 Server ready at ${url}`);
});

This example uses apollo-datasource-rest and passes the api to the resolvers:

events.js creates and exports = EventsAPI;

const {RESTDataSource} = require('apollo-datasource-rest');
class EventsAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = 'https://eonet.sci.gsfc.nasa.gov/api/v3/';
  }
async queryAllEvents() {
    const response = await this.get('events');
    return response.events;
  }
async getAllEvents() {
    const response = await this.queryAllEvents();
    return Array.isArray(response)
      ? response.map(item => this.eventReducer(item))
      : [];
  }
eventReducer(item) {
    return {
      id: item.id,
      title: item.title,
      description: item.description,
      link: item.link,
      closed: item.closed,
      categories: item.categories.map(i => ({
        id: i.id,
        title: i.title,
      })),
      sources: item.sources.map(i => ({
        id: i.id,
        url: i.url,
      })),
      geometry: item.geometry.map(i => ({
        magnitudeValue: i.magnitudeValue,
        magnitudeUnit: i.magnitudeUnit,
        date: i.date,
        type: i.type,
        coordinates: i.coordinates,
      })),
    };
  }
}
module.exports = EventsAPI;

and is passed to the resolvers like such:

resolvers.js

module.exports = {
  Query: {
    events: (_, __, {dataSources}) => dataSources.eventsAPI.getAllEvents(),
  },
};

Step 3:

Run the following query in the graphQL playground:

# Write your query or mutation here

query Query {
 events {
      geometry {
        date
        type
        coordinates
      }
    }  
}

Output:

And the output will be as such.

To conclude:

You can find the code for this example here on github.

To get a deeper understanding, please refer to the Apollo federation documentation on custom scalars here.

React Native Android : FAILURE: Build failed with an exception. MAC OS

TrackMyStories — Mon, 19 Apr 2021 16:29:01 +0000

This is an issue with how Gradle is automating the build and the current version of the JDK installed on your machine, follow these steps to fix it, the react native documentation states you need adoptopenjdk8, however you may have other conflicting JDK versions in the same directory.

Firstly: Recreate this error

In order to recreate this Error install a newer version of JAVA Development Kit for example JDK 16, or more than one JDK's on your mac.

https://www.oracle.com/java/technologies/javase-jdk16-downloads.html

If you run npx react-native run-android, You'll get the following build fail:

Your build may be failing because :

• More than one JDK's are installed.

• Incompatible JDK is installed.

• Or no JDK is installed.

This is an issue with how Gradle is automating the build and the current version of the JDK installed on your machine, the react native documentation states we need adoptopenjdk8, however you may have other conflicting JDK versions in the same directory.

So to fix this issue follow these steps:

Step One:

Open up your terminal and navigate to /Library/Java/JavaVirtualMachines by typing the following command:

cd /Library/Java/JavaVirtualMachines

after you have done that type "ls" to see what files are included and take note of the versions, incase you have one or multiple JDK files present like such:

delete them with the following command line :

the only dependency you need is adoptopenjdk-8.jdk as mentioned in the react native docs.

however delete that as-well and reinstall it after you have completed these steps.

After you have done so you can check if the files still exist by typing "ls" if the files are deleted.

Then run the following commands to insure all other links, plugins and files are deleted as-well from your Library:

Step Two:

Once all JDK's have been removed reinstall the correct JDK as mention in the react-native documentations.

Open up a new terminal

https://reactnative.dev/docs/_getting-started-macos-android

This may say adoptopenjdk-8.jdk is already installed:

regardless, go ahead and reinstall it with:

Once installation is complete, you should see the following:

At this point the error should be resolved and your build should work.

To Conclude

It is important to note that this is a build error, since react native uses Gradle to build automations, the conflicting of multiple jdk versions can cause your build to fail.

please refer to the following documentation to get a better understanding on Gradle compilation.

https://docs.gradle.org/current/userguide/userguide.html

Array.isArray(response) returns null ? Apollo GraphQL

TrackMyStories — Sat, 20 Feb 2021 20:20:03 +0000

Hi There!, (If you are challenged with the above function in graphQl’s documentation with your own data structure this article will give some clarity).

I can only imagine how mind bending it can be to include a boolean value in another boolean value in-order to handle a simple nested Array whose initial value is not an Array. Therefor this article will give clarity to any developer challenged by the dataSources part of Apollo GraphQL documentations.

disclaimer:

It expresses my opinion on where Apollo GraphQL went wrong in CONTEXT OF A TUTORIAL and why and how to better understand it.

Array.isArray(response) ? true : or false : ‘apollo-datasource-rest’.

I’ve been trying to do things by the book the way Apollo states in its docs. when working with ‘apollo-datasource-rest’, there are some aspects of their code that I feel is not helpful and even counter-productive in context of a tutorial.

For example:

async getAllLaunches() {
const response = await this.get(‘launches’);
return Array.isArray(response)
? response.map(launch => this.launchReducer(launch))
: [];
}

Speaking for myself, What has been my pain points in the grander understanding of things with relation to this function:

• is the use of brackets : [] as a boolean value, to use brackets in this context, seems to be more aesthetic in terms of how it looks on source code in relevance to data fetching, rather than an informative debugger when an error is thrown.

• In fact the entire statement’s target which is either true or false does not return the reason as to why an error may occur when the value is false for example : a nested array fetch error may say: “response.map(item => is not a function”. However the current referenced function will log an empty array “ :[ ]” or if you change the value of the bracket to “false” it simply returns null when an error occurs, this can be misleading because the real reason for the error is missing. As a developer reading this code in context to data fetching and seeing an empty “: [ ]” can mean a host of speculations.

In this respect Array.isArray(response) ? true : or false can be cumbersome when the data endpoint is not an array for example “ “a” : [ ];” .

“a”: [
0: {},
1: {},
]//the end point to this is not array.as oppose to[
0: {},
1: {},
]//the end point to this is an array.

Array.isArray simply checks if the value is an array or not, if it is it returns true if it isn’t it returns false.

so the function above returns the query if it is true however if it is false simple returns and ambiguous “:[ ]” empty array.

so if the empty array value is logged instead of an error how do you know what the root of the problem is?

In order to debug the following, I had to explicitly pass the same target value in both of the boolean fixes, true : false statements as such:

return Array.isArray(response)
? response.map(launch => this.launchReducer(launch))
: response.map(launch => this.launchReducer(launch));// Which returns the reason of the error:// “response.map(item => is not a function” is the error message.// as oppose to an empty array “: [];”.

In order to solve this problem I simply modified the above code to deal with my data structure by prefixing a boolean operator to Array.isArray, changing it to !Array.isArray in order to retrieve data the nested Array:

the logic behind the prefix is simple the “a : [ ];” is not an array return true and render the data please.

the updated function looks like this :

async getAllLaunches() {
const response = await this.get(‘launches’);
return !Array.isArray(response)
? response.a.map(launch => this.launchReducer(launch))
: [];
}

It seems that Array.isArray(true or false) can be overtly complex especially when a fetch call of this nature is made because of the definition of 2 boolean operators inside of the statement. Therefore having an error message which returns an empty array “: [];” or a false; statement can be difficult to debug when the reasoning is not logged.

React Native: Simple responsive Images for all screen sizes with flex.

TrackMyStories — Sat, 20 Feb 2021 20:13:17 +0000

Smartphones come in different shapes and sizes, therefore it is paramount our content responds accordingly.

Images can be problematic when delivering our design across different screens. A one size fits all strategy would not work in today's diverse smartphone landscape and would likely result in a user experience nightmare.

The Flexbox module is based on the Cartesian coordinate system, which is distances over two lines running perpendicular, famously known as the
X-axis and Y-axis, with the Cartesian system in mind our container can be calculated with the main axis which runs horizontal, and the cross-axis which runs vertically as illustrated in the image above.

Consider your container as the X-Axis and Y-Axis that holds the Image.

for example:



<View style={styles.container}> // X & Y axis.
<Image /> // value or items{% raw %}`
</View>
```

The container value has a height and width as per your requirements.

for example:


```
container : {width: 180, height: 200}
```


In order to ensure images inside the container adapt to change, we can use percentages to ensure the size is always on par with the height and width of the container.

Therefore, to make the images responsive we can simply set the value of height and width to 100% and resize mode to cover.

```
<View style={{
    width: 180,
    height: 200,
    aspectRatio: 1 * 1.4,

    }}>
    <Image
    source={{uri : item.image.url}}

    style={{

    resizeMode: ‘cover’,
    width: ‘100%’,
    height: ‘100%’

    }}
    />
</View>
```


By setting the Image’s height and width to 100% and resize mode to cover, the image will proportionately occupy a 100% of the container's real estate inside of the X and Y-Axis or the container. It will uniformly scale the image whilst maintaining it’s aspect ratio proportionate to the dimensions of the container.

To conclude, the application of geometry can be an effective resource in scalability. The simple notion of a box and the compatibility of its contents is a good way to think about how responsiveness works in our applications. It is important to note that the container’s style has precedence over the image’s style similar to a waterfall effect, that is how the container’s value dictates how high or wide the image can stretch in the UI.

Javascript: The four rules of {this}.

TrackMyStories — Sat, 20 Feb 2021 19:54:37 +0000

Firstly, this article is written with reference to a chapter from Kyle Simpson's great book You Don't Know JS: this & Object Prototypes. It is an incredible resource for anyone looking to build a deeper understanding of Javascript.

What rules determine the order of precedence where this points to when a function is executed?

There are four rules that determine the order of precedence on where this points to during function execution:

• Default Binding
• Implicit Binding
• Explicit Binding
• Hard Binding

Default Binding :

function js(){ console.log(this.binding); } var binding = 'default binding'; js(); // default binding

Breaking down our snippet above and understanding how our call-site determines where this points to when function js(){...} is executed, firstly, function js(){…} is our call-stack which holds console.log(this.binding); and the call-site for our function is js(); which is located on the last line of the snippet which is the point from which the function is called. furthermore, our variable var binding = 'default binding'; is declared in the global scope.

Implicit Binding:

function properties(){ console.log(this.binding); } var object = { binding: 'implicit binding', properties: properties }; object.properties(); // implicit binding

If you've worked with apollo resolvers or the react context API this second rule will give some deeper clarity on how they work through javascript.

breaking down the above snippet, our call-stack is function properties(){...}

which holds our this.binding binding, our call-site is object.properties();.

however, what differentiates this rule to the default binding is in the manner in which our call-site is declared.
The implicit rule can be determined if our call-site has a context object, function properties(){...}; is declared in the same fashion as our default binding from our first example, however, our call-site references object when calling a function, object.properties();.

At the point at which properties(); is called it is prefixed with var object = {...}, which contains the value on execution.

reference: As Kyle Simpson states in his book You Don't Know JS: this & Object Prototypes :

"When there is a context object for a function reference, the implicit binding rule says that it's object which should be used for the function call's this binding."

"With implicit binding as we just saw, we had to mutate the object in question to include a reference on itself to the function, and use this property function reference to indirectly(implicitly) bind this to the object."

Explicit Binding:

function properties(){ console.log(this.binding); } var object = { binding : 'explicit binding' }; properties.call(object); //explicit binding or properties.apply(object); //explicit binding // call or apply produce the same result.

Instead of including an implicit function reference inside var object = {...} and prefixing it to the call-site, we can explicitly call the function with a built-in utility call() and apply(), the function properties(){...} is the call-stack, however, our call-site uses the built-in utility to execute the function explicitly. It is important to note that call() and apply() result in the same outcome unless additional parameters are passed to them.

Hard Binding:

function properties(){ console.log(this.binding); } var object = { binding: 'hard binding' }; var hardBindedPropertiesToObject = function(){ properties.call(object); } hardBindedPropertiesToObject(); // hard binding

With respect to the hard binding snippet above, we create a function var hardBindedPropertiesToObject= function(){//call(object)} which calls the call-stack with var object = {...} which points towards this.

reference: As Kyle Simpson states in his book You Don't Know JS: this & Object Prototypes :

"This binding is both explicit and strong, so we call it hard binding."

Another thing to note is that the hard binding pattern has its own built-in utility Function.prototype.bind().

consider:

const module = { x: 42, getX: function() { return this.x; } }; const unboundGetX = module.getX; console.log(unboundGetX()); // The function gets invoked at the global scope // expected output: undefined const boundGetX = unboundGetX.bind(module); console.log(boundGetX()); // expected output: 42

source MDN developer.mozilla.org states:

To conclude, here are the 4 rules of this , I would highly recommend reading the you dont know js book series by Kyle Simpson. His books cover all the aspects of javascript that can enable any developer to gain proficiency in the language.

“HTTP Error: 400, Default service account: appspot.gserviceaccount.com (Email’s from Google’s support team included)

TrackMyStories — Sat, 20 Feb 2021 19:36:20 +0000

Header When deploying firebase cloud functions are you getting the following error?

"HTTP Error: 400, Default service account'<project_id>@appspot.gserviceaccount.com' doesn't exist. Please recreate this account (for example by disabling and enabling the Cloud Functions API), or specify a different account."

Header Or are you unable to see the functions on your dashboard after deployment?

Here is a more simplified response: Stack Overflow
This article should offer some clarity.

I was recently struggling with this issue and eventually solved it after raising the matter with Google's support teams (Google's response below).

My apollo express graphql server was working fine locally but whenever I tried to deploy it using firebase cloud functions it would print an error.

So here are my learnings and how this issue was ultimately resolved.

Header How to debug this error

• Navigate to your google cloud console permissions page and search through the list for @appspot.gserviceaccount.com it should look like this image below 👇🏼.

It is important to note that @appspot.gserviceaccount.com is the App Engine default service account. It acts as a security feature " intended to represent a non-human user that needs to authenticate and be authorized to access data in Google APIs."

To get an idea of where things are going wrong, use this command line.

firebase deploy - -only functions - -debug

If '@appspot.gserviceaccount.com' is missing, then you won't be able to deploy anything(SEE EMAILS WITH GOOGLE BELOW), if it isn't, check and see if it's enabled, try disabling it and enabling it again.

@appspot.gserviceaccount.com is pre-installed by default, regardless of a paid account or not. Try and recall if at any time you may have deleted it after or before deployment.
Now if for any reason you deleted the service account over a period of more than 30 days than you can not retrieve it, and you must create a new firebase project. However, if it is within 30 days you can undelete it.

Here is my conversation with Google's support team, they were extremely helpful.

Header RESPONSE FROM GOOGLE'S Support team Email #1:

"Hello Ali
I am checking the logs of your project, unfortunately the service account was deleted on May, there is no chance to recover it nor recreate it
The only workaround available is to create a new project and deploy the service desired there. I know this could not be the best option for you nevertheless it is the way this works by design.
Do not hesitate to write back if you have more questions.
Cheers,"

Header RESPONSE FROM GOOGLE'S Support team Email #2:

"Hello Ali
I am glad to read that you have been able to deploy your functions successfully, unfortunately that service account cannot be recovered after 30 days of being deleted and that is the only solution. If you have other questions, please let us know by contacting us again through our support channel.
Cheers,"

Header lastly, the command line:

firebase deploy - -only functions - -debug

Is helpful, Although it won't help if there is no service account linked to the App Engine, it'll just highlight the obvious:

This was the error that was only resolvable by creating a new project.

"HTTP Error: 400, Default service account '@appspot.gserviceaccount.com' doesn't exist. Please recreate this account (for example by disabling and enabling the Cloud Functions API), or specify a different account."

I hope this helps.