Let's say I've got a GraphQL query that looks like this:
query {
Todo {
label
is_completed
id
}
}
But the client that consumes the data from this query needs a data structure that's a bit different- e.g. a TypeScript interface like:
interface Todo {
title: string // "title" is just a different name for "label"
data: {
is_completed: boolean
id: number
}
}
It's easy enough to just use an alias to return label as title. But is there any way to make it return both is_completed and id under an alias called data?
There is no way to do that. Either change the schema to reflect the client's needs or transform the response after it is fetched on the client side.
Related
I am getting started with Strapi and have setup a basic model in the Strapi admin called page which looks like so:
page: {
title: Text (required)
slug: Text (required and unique)
}
As you can see it has a field called slug which is always unique. What I am wondering is how I can query by this field?
So far I have added 1 entry and when I launch graphql playground (at http://localhost:1337/graphql) I can get my entry returned via the following query:
query {
page(id:"1") {
title
}
}
When I try to query via slug as opposed to id like so:
query {
page(slug:"/") {
title
}
}
I am unable to do so even though it's a unique field. It does not even come up with the suggestions to use slug as a unique idetifier input inside the brackets. Why would this be?
When I try to get an excerpt from WPGraphQL plugin and pass excerpt(format: RAW) in the query, it's working fine in the WPGraphiQL window, but when I'm executing the same query in Vue Apollo it's always returning null.
Here is my code:
apollo: {
posts: gql`
query {
posts {
nodes {
title
uri
date
databaseId
featuredImage {
sourceUrl
}
excerpt(format: RAW)
}
}
}
`
},
Am I guessing right that it has to deal with enum type on the server-side and the way it's passed in Apollo query string? Also when I pass only excerpt without argument it returns excerpt with HTML tags, so... what's wrong?
Use excerpt(format: FORMATTED)
and use in html like this:
dangerouslySetInnerHTML={{ __html: node.excerpt }}
You can only access content in the RAW format if your user is authenticated. This is why you can see the RAW content in the WPGraphiQL window, but not when you try to get this same data from your Vue app. You need to authenticate the query in your app. https://www.wpgraphql.com/docs/authentication-and-authorization/
Currently, I am using the react dashboard for frontend and cube.js for the backend.
Result which I get from the backend is in the form of json and each key represents the column of my database.
Resultant example:
{
user.email:"xxx",
user.id:"xxx",
}
Where User is my table and email is the column name. This is causing me problem while rendering the data using react-table.
Is there any way I can give alias to columns and get data like this:
{
email:"xxx",
id:"xxx"
}
you can define your accessor as a function as the sample in npm, https://www.npmjs.com/package/react-table#example
{
id: 'email', // Required because our accessor is not a string
Header: 'Email',
accessor: d => d['user.email'] // Custom value accessors!
}
in javascript you can access the value like this object["user.email"]
You said you can't use it like that in react-tables, so you're going to have to transform it into another object that the table can accept.
Something like this
var user = {
email: object["user.email"]
}
Now you can access the newly transformed object like this.
user.email
I will have my api return data in this format
[{
“Type”:”alpha”,
“Count”:5
},
{
“Type”:”beta”,
“Count”:7
}
]
What would be my query string?
const Levels = gql`
{
Levelsquery {
Type
Count
}
}
`;
Above does not work because there is no levelsquery key, the whole response is an array
The current problem is that this api is kind of fixed from the server,it does not matter if it is a graphql query or a simple REst query, the output will always be the same so then I need to handle my client query to reflect it’s output
I know it is wrong to have this in graphql, but this is what it is and I cannot change it currently
Let's assume the following data that is exactly being returned like it's stored into database:
[
{
"user_name": "User 1",
"photo_file": "user1.jpg"
},
{
"user_name": "User 2",
"photo_file": "user2.jpg"
}
// ...
]
I want to use this data in a JavaScript application but I'd like to append a full path of the user's photo, like doing a treatment for the data before returning it to the API. How can I do that using Laravel?
I assume at present you're just converting the results of your query into JSON and returning that. This works, but it does mean the response is tightly coupled to your database structure, which is a bad idea. Ideally you should have a layer of abstraction to handle adding and formatting data, kind of like a view layer in MVC.
There are plenty of solutions for this. I use Fractal for my Laravel API's. It allows you to easily customise the output of a particular endpoint by specifying a transformer that will render that object for you. That way you can easily choose the data to display and format it how you wish.
Accessors are good for this.
Let's assume your data is stored in a model called Customer. I would write an accessor like this:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Customer extends Model
{
protected $appends = ['photo_file']; // In order to see the new attribute in json dumps
public function getPhotoPathAttribute()
{
$name = $this->getAttribute('photo_file');
if(!isset($name))
return null;
return '/full/path/to/image/' . $name;
}
}
This way you can now call $customer->photo_path and it will return `/full/path/to/image/image_name.jpg' (or null if the attribute is not set).
Edit:
In order to show this attribute in jsons (without specifically calling $model->photo_path) you will also need to add protected $appends = ['photo_file'] to the model (updated).
I would recommend against overriding original name (so I leave photo_file attribute untouched).
If you are building Laravel API, sure, as Matthew said, go and check Fractal. But don't forget to Dingo, the best tool for building API at Laravel. And it uses Fractal too.