how to make a query with actions.source.fetch()
I’m searching about something like
$args = [
'post_type' => 'post',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
];
$query = new \WP_Query( $args );It’s not very clear from this what you are trying to accomplish @modyydom 
Could you provide more details ?
in wordpress you can query some posts with this code
$args = [
'post_type' => 'post',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
];
$query = new \WP_Query( $args );
this code will return the latest 3 posts in post type post
how to accomplish the same functionality in the frontity
thank you @mmczaplinski
I think what you are trying to achieve is done in frontity by using libraries.source.api.get(), followed by libraries.source.populate()
Have a look at the documentation for those 2 methods here:
Let me know if that helps
From what I see, source.api.get() returns a promise.
Can you show us an example of its implementation in a component?
and using a Custom Post Type?
Yes, indeed it returns a promise. Could you tell us what aspect is still not clear for you based on the example in the documentation?
Hi Michal,
As I commented in the other question, in my connected component. i need some products that are not in the state yet.
I think I should call a handler for each product id that bring it in the state
How would it be ?
Hey @modyydom and @vscopise I’m working on the version 2 of our source plugins, including wp-source. With this new version, handlers will be much more reusable.
Creating a “fake URL” to fetch the posts belonging to the query that @modyydom mentioned in the opening post could be done only by adding this to the state (either in your theme/package or your frontity.settings.js file:
const state = {
source: {
handlers: {
postsByDate: {
library: "wpSource",
pattern: "@posts-by-date",
set: {
isPostsByDate: true
},
options: {
type: "archive",
endpoint: "post",
params: {
per_page: "3",
order_by: "date",
order: "desc"
}
}
}
}
}
};
Then, you can simply use actions.source.fetch("@posts-by-date") and once the action has finished you will have those posts in your state.
If you want, you can access the data objects using state.source.get, add the fetch to the beforeSSR action, whatever you need, just like any other URL in WordPress.
const beforeSSR = async ({ actions }) => {
// Make sure this posts are always fetched before the SSR.
await actions.source.fetch("@posts-by-date");
};
const MyComp = ({ state }) => {
const data = state.source.get("@posts-by-date");
if (data.isReady...)
}
If you want to use those posts in a URL, you can start the pattern with "/":
const state = {
source: {
handlers: {
postsByDate: {
library: "wpSource",
pattern: "/some-fake-url",
options: {
// ...
}
}
}
}
};
And access them by navigating to /some-fake-url in your frontend.
/some-fake-url/page/2 and so on.<Switch>
<FakeUrl when={data.isPostsByDate}>
...
</Switch>
Could you please guys let me know your opinion?
This is amazing bro.
Really a very simple and self explanatory code.
but I don’t understand what library: "wpSource", does.
And please please make it possible sooon as it will change completely the way I right this code and I think the efficiency also.
Thank you for your great effort
I’m glad you like it
One of the goals of this version 2 is, not only to open the doors to other source packages, but also to allow them to work together.
That means that if a site is using a package wp-graphql-source instead of wp-source to connects to WordPress using the WPGraphQL plugin, and you (or another package that you have installed) need to access the REST API, they can do so without affecting the requests that are done using WPGraphQL.
For example, these could be some handlers of the wp-graphql-source package:
import { wpGraphQl } from "@frontity/wp-graphql-source/handlers";
export default {
state: {
source: {
handlers: {
home: {
library: "wpGraphQl",
pattern: "/",
options: {
query: {
// The graphql query for the home.
}
}
},
posts: {
library: "wpGraphQl",
pattern: "/(.*)?/:slug",
options: {
query: {
// The graphql query for a single post.
}
}
}
// more handlers...
}
}
},
libraries: {
source: {
handlers: {
// Expose the handler code. This will be used by actions.source.fetch.
wpGraphQl
}
}
}
};
Now, a Frontity package that needs the data of some custom post type that exposes some special fields in the REST API should be able to work without problems. This could be its index.js:
import { wpSource } from "@frontity/wp-source/handlers";
export default {
state: {
source: {
handlers: {
allReviews: {
library: "wpSource",
pattern: "@all-reviews",
options: {
type: "archive",
endpoint: "reviews",
params: {
per_page: 100
}
}
}
}
},
libraries: {
source: {
handlers: {
// Make sure the handler is available, even if wp-source
// is not included.
wpSource
}
}
}
}
};
The only requirement for this plugin is that people add a state.source.api with the URL of their REST API. These would be the frontity.settings.js file for that site:
const settings = {
// ...
packages: [
{
name: "@frontity/wp-graphql-source",
state: {
source: {
graphql: "https://mysite.com/graphql"
}
}
},
{
name: "my-reviews-package",
state: {
source: {
api: "https://mysite.com/wp-json"
}
}
}
]
};
If a site uses wp-source and has already configured state.source.api, then you don’t need to add it again:
const settings = {
// ...
packages: [
{
name: "@frontity/wp-source",
state: {
source: {
api: "https://mysite.com/wp-json"
}
}
},
"my-reviews-package"
]
};
Yes, we have it in mind. After 8 months, this is the only part of the framework that needs a breaking change, so we want to do it as soon as possible.
Im looking for something like that code:
<article id="post-<?php the_ID(); ?>" <?php post_class(array('post-item')); ?>>
<?php if (has_post_thumbnail()) : ?>
<div class="post-thumb">
<a href="<?php the_permalink();?>">
<?php the_post_thumbnail('top-news-thumbnail-x2'); ?>
</a>
</div><!-- /.thumbnail -->
<?php endif; ?>
<div class="content">
<h2 class="title">
<a rel="bookmark" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<div class="meta">
<span><?php esc_html_e('Posted by', 'top-news'); ?></span>
<?php the_author_posts_link(); ?>
<span>-</span>
<span><?php echo get_the_date(); ?></span>
</div><!-- /.meta -->
<div class="excerpt">
<?php the_excerpt(); ?>
</div><!-- /.excerpt -->
<a href="<?php the_permalink(); ?>" class="btn btn-default readmore"><?php esc_html_e('Read More', 'top-news'); ?></a>
</div><!-- /.content -->
</article><!-- /.post-item -->
For example:
Showme last 5 post from technology category and now apply classname’s to all title, image, etc to css all loop components, do you understand me?
I see 3 possible solutions but i dont have idea howto implement any in frontity:
The purpose is to make something like this:
Each section show some category post or random post with some css styles.
Any help? Thank you so much!!
Hey @jozuaugusto
Take a look at this demo that @juanma has created, I think it is really similar to what you are trying to accomplish:
Please let us know if its helpful
Hi @luisherranz,
I was trying to figure out if this functionality ever made it into the wp-source package?
I like this way of configuring a handler, makes it a lot easier.
If it’s still on the roadmap is there any timeline for a release?
Thanks!
