I have a Headless cms project I created using GraphQl, NextJS and Hygraph.
I'm also using NPM Graphql-request.
I'm having issues "receiving" more than 10 posts on my project.
So far I had less then 10 posts on my site, but now that I posted more, I'm simply not receiving the extra ones.
I did some research but I can't seem to find the solution!
Here's what I got:
const QUERY = gql`
{
posts {
title
id
slug
datePublished
mobileCoverPhoto {
url
}
coverPhoto {
id
url
}
category
imageAtlTag
author {
id
name
avatar {
url
}
}
content {
text
html
}
}
}
`;
Everything works fine until post #10 only.
Thanks everyone for helping!
10 is the default number of fetched posts. If you want to specify the number of posts you need to do it like this:
posts(first: 10) {
nodes {
title
slug
}
}
I have a headless WordPress installation, and using a React frontend to query posts with a search query of:
posts(where: {search: $searchStr}) {
nodes {
title
content
link
}
}
but would like to include media files in the search results as well. I'm able to query and log out the mediaItems from the following additional query:
mediaItems {
nodes {
title
sourceUrl
}
}
but unable to figure out how to include these in the search results. How do I combine the posts and mediaItems in the same search query and return all results based on the search string?
Updated with full query
The full query I'm using, passes the search query into the posts GraphQL query. Since mediaItems and posts are both top level in WordPress, how can I combine the two queries so that all posts and all media items are returned based on the search parameter?
query appQuery($searchStr: String) {
posts(where: {search: $searchStr}) {
nodes {
title
content
link
tags{
nodes {
name
}
}
}
}
mediaItems {
nodes {
title
sourceUrl
}
}
}
You can create another GraphQL type for that & nest it in your main type so that you can also query your data. Also add resolver for that data to be retrieved.
For example: let's say you have a blogging site & you have some posts. For that
type Post {
_id: String
title: String
credit: PostCredit # Name of nested type
}
type PostCredit {
authorId: String # You can also perform further nesting
publicationId: String
}
Seeing some strange behavior querying a Prismic data source and filtering by a content relationship in my gatsby site. I"m trying to create a page filtering some products based on the category passed into this page. Reading both the Prismic and Gatsby docs, i should be able to filter the data with the where clause but i get this error when i try to build
error Unknown argument "where" on field "allPrismicModel" of type "Query"
Below is the relevant sections of the query
query getProducts($uid: String) {
allPrismicModel(where: { system_category: $uid }) {
edges {
node {
data {
system_category {
uid
}
...other fields here...
}
}
}
}
}
Anybody ever encountered this or know how to resolve it?
where doesn't exist in Gatsby. I'd highly recommend using GraphiQL (under localhost:8000/___graphql) to see what you can do. There is also this doc showing all possibilities: https://www.gatsbyjs.org/docs/graphql-reference/
It'll probably will be in the end (untested):
filter: { system_category: { eq: $uid } }
allPrismicModel(filter: { system_category : { eq: $uid } }) {
edges {
node {
data {
system_category {
uid
}
...other fields here...
}
}
}
}
}
This is a more common way to run that query
I ran into a problem querying a field of type "long text" from contentful.
I know the Contentful long text field is actually markdown. So I installed the gatsby-transformer-remark plugin, which I presumed I need.
Here's my GraphQL query:
query getStoreById($relativeUrl: String!) {
contentfulStore(relativeUrl: { eq: $relativeUrl }) {
relativeUrl
shopPageTitle
mainPageTextContent {
mainPageTextContent
}
}
}
The console still shows:
Objects are not valid as a React child (found: object with keys {childMarkdownRemark}).
Something to do with that error message.
Thanks!
The query will look something like:
query getStoreById($relativeUrl: String!) {
contentfulStore(relativeUrl: { eq: $relativeUrl }) {
relativeUrl
shopPageTitle
mainPageTextContent {
childMarkdownRemark {
html
}
}
}
}
If you haven't learned how to use GraphiQL yet, try opening it at localhost:8000/___graphql! It's your best friend for learning how to query your Contentful schema.
I just started using apollo client on a React application and I'm stuck on caching.
I have a home page with a list of products where I do a query to get the id and name of those products and a product page where I do query for the ID, name, description and image.
I would like that if a user visits the home page fist then a specific product page to only do a query for that product's description and image, also display the name during the loading (since I should have cached it already).
I followed "Controlling the Store" part of the documentation (http://dev.apollodata.com/react/cache-updates.html) but still couldn't resolve it.
The query that is done when we go to the product page still asks for both the product's id and name whereas they should be cached since I already asked for them.
I think I'm missing something but I can't figure it out.
Here is a bit of the code:
// Create the apollo graphql client.
const apolloClient = new ApolloClient({
networkInterface: createNetworkInterface({
uri: `${process.env.GRAPHQL_ENDPOINT}`
}),
queryTransformer: addTypename,
dataIdFromObject: (result) => {
if (result.id && result.__typename) {
console.log(result.id, result.__typename); //can see this on console, seems okey
return result.__typename + result.id;
}
// Make sure to return null if this object doesn't have an ID
return null;
},
});
// home page query
// return an array of objects (Product)
export default graphql(gql`
query ProductsQuery {
products {
id, name
}
}
`)(Home);
//product page query
//return an object (Product)
export default graphql(gql`
query ProductQuery($productId: ID!) {
product(id: $productId) {
id, name, description, image
}
}
`,{
options: props => ({ variables: { productId: props.params.id } }),
props: ({ data: { loading, product } }) => ({
loading,
product,})
})(Product);
And my console output:
The answer to your question actually has two parts:
The client cannot actually tell for sure that these queries resolve to the same object in the cache, because they have a different path. One starts with products, the other with product. There's an open PR for client-side resolvers, which will let you give the client hints about where to find things in the cache, even if you haven't explicitly queried for them. I expect that we will publish that feature within a week or two.
Even with client-side resolvers, Apollo Client won't do exactly what you described above, because Apollo Client no longer does query diffing since version 0.5. Instead, all queries are fully static now. That means even if your query is in the cache partially, the full query will be sent to the server. This has a number of advantages that are laid out in this blog post.
You will still be able to display the part that's in the cache first, by setting returnPartialData: true in the options.
This question is quite old, however, there is a solution to map the query to the correct location using cacheRedirects
In my project, I have a projects query and a project query.
I can make a cacheRedirect like below:
const client = new ApolloClient({
uri: "http://localhost:3000/graphql",
request: async (operation) => {
const token = await localStorage.getItem('authToken');
operation.setContext({
headers: {
authorization: token
}
});
},
cacheRedirects: {
Query: {
project: (_, { id }, { getCacheKey }) => getCacheKey({ id, __typename: 'Project' })
}
}
});
Then when I load my dashboard, there is 1 query which gets projects. And then when navigating to a single project. No network request is made because it's reading from the cache 🎉
Read the full documentation on Cache Redirects