Filtering Queries from Prismic and GatsbyJS - reactjs

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

Related

How to add extra field to Algolia

I have a already made project having connection between Algolia + Gatsby + Contentful.
In which the algolia queries have
allContentfulProduct {
nodes {
objectID: id
productTitle: title
slug
seoTitle
node_locale
}
}
}
const queries = [
{
indexName: process.env.ALGOLIA_SEARCH_INDEX_NAME_PRODUCTS,
query,
transformer: ({ data }) => data.allContentfulProduct.nodes,
}
]
I need to add one extra field to algolia to filter through the search.
But when i add isVisibleInternalSearch to the const query the field is only visible when the gatsby build command in ran.
When there is any change in the contenful fields then the site is not able to find the algolia field.
allContentfulProduct {
nodes {
objectID: id
productTitle: title
slug
seoTitle
node_locale
isVisibleInternalSearch
}
}
}
I am having the same problem in the example site I created on netlify. Once the site was working fine but when there was any kind of change in contentful the field from the algolia disappeared.

Include mediaItems in GraphQL Wordpress query search

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
}

AppSync/Amplify Query using a Parameter Error ""Validation error of type FieldUndefined:"

I currently have a AppSync schema where I created a separate query within the AppSync console in order retain certain parameter (assetId) and get a list of the results in my DynamoDB table. I have tested the query already within the AppSync console and it works fine, I am now just having troubles using Amplify in my React App in order to call the query. I get the following error when running my App:
DisplayCard.js:34 Uncaught (in promise) {data: null, errors: Array(1)}
"Validation error of type FieldUndefined: Field 'getAssetIdRating' in type 'Query' is undefined # 'getAssetIdRating'"
I have tried following the documentation as per the Amplify site (https://aws-amplify.github.io/docs/js/api) but am still receiving this error.
For reference here is the query when I run it in the AppSync console: (returns the desired result)
query getAssetIdRating {
getRatingsAssetId(assetId:"949142fb-91d2-41bd-8c04-1d42ed8166c9") {
items {
id
assetId
rating
}
}
}
The resolver that I am using for this query is the following: (I have created a separate Index)
{
"version" : "2017-02-28",
"operation" : "Query",
"index": "assetId-index",
"query" : {
## Provide a query expression. **
"expression": "assetId = :assetId",
"expressionValues" : {
":assetId" : $util.dynamodb.toDynamoDBJson($ctx.args.assetId)
}
}
}
And now moving onto my React code, this is the current query that I am using within react, under src/graphql/queries.
export const getAssetIdRating = /* GraphQL */ `
query getRatingAssetId($assetId: ID) {
getAssetIdRating(assetId: $assetId) {
items {
id
assetId
rating
}
}
}
`;
And when I call it then in my React application:
componentDidMount = async () => {
this.getRatings();
}
getRatings = async () => {
let { assetIdRatings } = this.state;
const result = await API.graphql(graphqlOperation(queries.getAssetIdRating, {assetId: '949142fb-91d2-41bd-8c04-1d42ed8166c9'}));
console.log(result);
}
Note that when I call the listRatings query it works fine, just does not work with this query. And as a side note, I added this query later in manually through the AppSync console, I don't presume that should play an issue?
Either way, any help would be greatly appreciated! And I can upload anymore necessary code if required! Thanks for the help!
sorry you can ignore the question, it was a simple typing error :P You miss it when its late at night!
You can see the typing error on my Query:
getRatingsAssetId(assetId:"949142fb-91d2-41bd-8c04-1d42ed8166c9") {
getAssetIdRating(assetId: $assetId) {
Thanks though for the help!

GatsbyJS - How to query longtext Contentful fields in GraphQL

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.

GraphQL fragments of different types in apollo

Edit: #helfer suggested this might be a bug. Github issue
For a new application I am using Apollo to do the graphql management for me.
I have multiple types that can also contain other types.
To simplify my life as a developer I want to use fragments to avoid duplicated code.
I am trying to use fragments for different types together.
but the query results in an error, because Subject fragments cannot be used for the BusinessArea type.
Is this a bug or did I miss something?
Def:
const subjectInfo = createFragment(gql`
fragment subjectInfo on Subject {
id
name
}`
)
const businessAreaInfo = createFragment(gql`
fragment businessAreaInfo on BusinessArea {
id
name
subjects {
...subjectInfo
}
}`,
[subjectInfo]
)
graphql(gql`
query {
businessAreas {
...businessAreaInfo
}
}
`, {
fragments: businessAreaInfo
})
Resulting query:
{
businessAreas {
...businessAreaInfo
...subjectInfo
}
}
fragment businessAreaInfo on BusinessArea {
id
name
subjects {
...subjectInfo
}
}
fragment subjectInfo on Subject {
id
name
}

Resources