Custom Directives Solution: Date Formatting

[00:00:00]
>> So let's start with the date one. So the first thing is, I will let me get out of this file and go to our actual server here. So I'll declare a directive. I like to declare my directors at the top of the schema, in this case cuz it's one file.

[00:00:18]
So much better so or not declare but directive. And I'm just going to call this formatDate. You can call it whatever you want. It's totally up to you. I'm gonna have this taken a stream or a format that's like a stream and I'll default to something like. Day day or day day, month month month, year year or year year year, I don't know.

[00:00:51]
We'll see what that looks like. I don't know what it's gonna look like. And, that's gonna be on a field definition. Like that, that ,that. The next thing I'm gonna do is I'm going to go over to our cinema close on these tabs or go over to our directors file here.

[00:01:14]
And I'm gonna make a new class for the for mates formats, dates directive. You don't have to name a directive is just a convention so you know what it is. And that's gonna extend our schema directive visitor here. And because we're on a field definition, we're going to use the visit field definition function here, get access to the field.

[00:01:39]
And what we'll do is we need to also get access to the default resolver and a graphical string here. So what I'll say is the resolver, is gonna be field.resolve, if there is one. But if there isn't one defined as in using a default one, I need to set it to the default one.

[00:02:00]
And then I'll say, field.resolve, is gonna equal this new thing that I have here. Which is gonna be args. And then I'll go ahead and get the results which will be able to make this a sync because I have no idea what the resolver will be doing. So I'm gonna wait the resolver.apply, I'm using an array here and I'll pass in this with args.

[00:02:39]
Get the result and then once I get the results, I can go ahead and format it. So then I'll say, well, now that I have the result I can just return Format, they just takes the timestamp and then whatever format you want. In this case, the format is gonna be in an argument.

[00:02:59]
So I'll say const format. It's not the name that I put here.-
>> Yeah
>> Format.
>> Yes
>> Like that. Take the format here. From this.args like that, and passing the format. Oops format, there we go. And the reason I did it a sneak away here is because you have no idea.

[00:03:28]
What this resolver is going to be it could be a synchronous, someone could have written a resolver for whatever field you're gonna add this to and it could have been a synchronous and if you don't wait for it, well, yeah, you're not gonna get the result back. This is exactly what graph field does it.

[00:03:43]
That's why it's able to allow you to return a promise because it is just going to pretty much read everything like a promise anyway. All right, so, we got that, looking good, looking good. Everything should be a string but just in case it's not I'm gonna say field.type equals GraphQLString just in case they're it isn't one for whatever reason make it a string.

[00:04:10]
And now he's export this. Is not saying Formats. Date directive. Cool, got that. Type that's looking good. Now we can go over to our index file. And we can import those directives Keep one of these 6 From directives, yup. FormatDateDirective here and I'm gonna type that, so I called it formatDate like this.

[00:04:52]
So that's the key that I would have to place In the map for schema directors. So that, and give it the value of, for my date directive. And there's nothing stopping you if wanted to like, a list this directive, to also not just before my date but maybe you wanted to say dateFormat.

[00:05:21]
I don't know you wanted to also call it that, whatever reason you wanted to do both, cool just copy that and you can go over here and you can say Format, or day Format and this give you the same value, it's the same thing. Works exactly the same.

[00:05:34]
You could do whatever you want there. Looks like it didn't break yet on that. Guess it's not the right one I'll start this over here. Cool, that didn't break. All right, and now we need to add our directive to a field. And actually see what happens. So let me find a field that I know is saying look at my database right quick.

[00:06:01]
What do I have in here? I got some post. Okay, cool. I'm just gonna add it to the post the feed or we're supposed to There we go, here. So I could say, @formatDate. I'm just going with the default one, handle it for now and see what that looks like.

[00:06:20]
Hopefully, that doesn't break date FNS. If that's not a real format, it'll tell us. So we have the formatDate there, everything looks good. Can go to GraphQL well here. Refresh this thing. Get rid of that will go away.I can get the feed, I can get a post or ID not get a created at the name Or message, execute that and ever go look at a nice format a date.

[00:06:55]
Pretty clean right? Then had to do anything super awesome. So that's really cool but what if we want the query to be able to pass up the format so let's, you know change this over the quarter. You can do that So what we'll do is, we'll go to directives.

[00:07:10]
And now we'll add a new argument for this field. We'll say, field.args.push(). Add in a new argument here, of a name. We'll call that a format, so they can add one. And its type is gonna be a GraphQL string, like that. So we got that that's good. And we'll call this the default formats like that.

[00:07:31]
And then for format, what we'll do is we need to grab it from the arguments. So this will be the route. And the format would actually be in here. And this will be any other arguments that they might have passed up for this field, which I don't know if there is I know there isn't this directive has no idea.

[00:07:47]
So I need to Account for I'll just call them rest. And then we have the context object which we're not interested in. And then we have the info object which we are not interested in. So I'm going to change this to call. And I'm going to pass in the route values the first argument, then I'm going to pass in the rest of the inputs as the second argument and we're gonna pass in the context I'm going to pass it info, same thing every resolver needs.

[00:08:11]
And if a format, I'm either going to format the date with that, or I'm going to Default to the Default format, like that. Pretty simple. So we got the default format, you got argument coming in. So let's check that out. So that's still works is Refresh this. If we do this, you can see get a format here now, so like I said, formats.

[00:08:34]
And then own, I can just say, I just want the months. So we could try that, and you just get the month. All right, let me try capital M. Cool, just October. Or if I want the full month, I think it's four M's? Yeah, there we go.