is it possibile to reshape a field in order to have a situation like this
from this:
query firDetail($firId: Int) {
Firs(where: {id: {eq: $firId}}) {
nodes {
id
codiceFir
accettato
accettatoParzialmente
respinto
movimenti {
rifiutoId <--field to flat
}
codiceFir
cantiereProduttoreId
to this:
query firDetail($firId: Int) {
Firs(where: {id: {eq: $firId}}) {
nodes {
id
codiceFir
accettato
accettatoParzialmente
respinto
reshaperdField <---flattened field
codiceFir
cantiereProduttoreId
i've tried to prepend an alias in this way but this rename only the field
uery firDetail($firId: Int) {
Firs(where: {id: {eq: $firId}}) {
nodes {
id
codiceFir
accettato
accettatoParzialmente
respinto
reshaperdField : movimenti {
rifiutoId
}
codiceFir
cantiereProduttoreId
Related
I have two components, one of the components creates new items, the other one displays them using an "infinite scroll list". These two components do not have a parent/child relationship and they're not rendered at the same time (they're on different "pages").
I've followed these docs and included the modified object in the mutation of my first component. And I can see the new object in the Apollo cache using dev tools. (Car:<some UUID> gets added in the cache after the mutation runs)
My paginated component is configured with relay style pagination, and the pagination works fine, but when I add a new item it doesn't appear in the list until I refresh the page.
My InMemoryCache looks like this:
...
typePolicies: {
// paginated results
Query: {
fields: {
cars: relayStylePagination()
}
},
CarsResult: {
fields: {
edges: {
// Concatenate the incoming list items with
// the existing list items.
merge(existing = [], incoming) {
return [...existing, ...incoming]
}
}
}
},
PageInfo: {
fields: {
endCursor: {
merge(existing, incoming) {
return incoming
}
}
}
}
}
The mutation looks like this:
${CAR_SUMMARY_FRAGMENT}
mutation CreateCar($name: String!) {
createCar(
input: {
name: $name
}
) {
...CarSummary
}
}
The CreateCar return type is Car
Then my paginated query:
query CarsPaginated($after: Cursor) {
cars(
page: { first: 25, after: $after }
orderBy: { field: CREATE_TIME, direction: DESC }
) {
edges {
node {
...CarSummary
}
}
totalCount
pageInfo {
hasNextPage
endCursor
}
}
}
The CarsPaginated return type is CarsResult:
type CarsResult {
edges: [CarEdge]
pageInfo: PageInfo!
totalCount: Int!
}
type CarEdge {
node: Car
cursor: Cursor!
}
Ideally, I'd like the new item to show up at the top of my items list on the other component.
I've tried to use the "refetchQueries" attribute but the paginated query is not active since the list component is not rendered at that time.
Maybe there's something I need to do in the typePolicies?
I want to display groups of Shopify products based on what collections they're associated with, using gatsby-source-shopify
Filtering to get all products from one collection as easy as running this query:
const { allShopifyCollection } = useStaticQuery(
graphql`
query {
allShopifyCollection(filter: {id: {in: "Shopify__Collection__Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzE3NzAxMjY3MDQ5OA=="}}) {
edges {
node {
products {
title
}
}
}
}
`
)
However it's not possible (to my knowledge) to query multiple times on the same data type in the same component.
What's the preferred way to approach this issue?
Use multiple components that fetches the data for each collection and
pass it to a grid component?
Fetch all collections and filter out each collection?
Another solution?
Can you use query aliases?
const { allShopifyCollection } = useStaticQuery(
graphql`
query {
collection1: allShopifyCollection(filter: {id: {in: "Shopify__Collection__Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzE3NzAxMjY3MDQ5OA=="}}) {
edges {
node {
products {
title
}
}
}
}
collection2: allShopifyCollection(filter: {id: {in: "Shopify__Collection__someOtherCollection"}}) {
edges {
node {
products {
title
}
}
}
}
collection3: allShopifyCollection(filter: {id: {in: "Shopify__Collection__yetAnotherCollection"}}) {
edges {
node {
products {
title
}
}
}
}
`
)
I have the following GraphQL query:
export const query = graphql`
query NewsQuery($slug: String!) {
datoCmsNews(slug: { eq: $slug }) {
id
title
description
slug
meta {
publishedAt
}
cover {
fluid(maxHeight: 530) {
...GatsbyDatoCmsSizes
}
}
}
allDatoCmsNews(sort: { fields: [meta___publishedAt], order: DESC }, limit: 4) {
edges {
node {
id
title
slug
meta {
publishedAt
isValid
status
}
cover {
fluid(maxHeight: 375) {
...GatsbyDatoCmsSizes
}
}
}
}
}
}
`;
On my allDatoCmsNews query how would I go about about sorting/filtering out a News item where a $slug is equal to the current slug? I don't want to show a News item if that news item is currently being viewed. I'm guessing I would have to use neq just struggling with the correct syntax.
Thanks
Pretty trivial using filter:
allDatoCmsNews(sort: { fields: [meta___publishedAt], order: DESC }, limit: 4, filter: {slug: {ne: $slug}})
I am currently working on a Gatsby documentation site. One particular page retrieves the content of various README files for HTML/CSS components which are grouped into three different categories, based on regex searches of their local filepath structure. I'm using 3 separate aliased queries at the moment to retrieve very similar data and the DRY coder in me feels this should be possible with one and a $group-type variable (which would replace atoms, molecules and organisms in the below code) or something similar. As I'm a real newbie to GraphQL I'm not sure if this is possible and I can't seem to find anyone doing this online. Here's what I have so far:
export const pageQuery = graphql`
query($path: String!) {
pageData:
markdownRemark(fields: { slug: { eq: $path } }) {
html
fields {
slug
title
}
fileAbsolutePath
}
atoms:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-atoms/"}}) {
edges {
node {
fields {
slug
title
}
}
}
}
molecules:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-molecules/"}}) {
edges {
node {
fields {
slug
title
}
}
}
}
organisms:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-organisms/"}}) {
edges {
node {
fields {
slug
title
}
}
}
}
}
`;
You can define fragments to use in your queries. These allow you to define a selection set once and then use it just by referencing the name of the fragment. Do note that you have to know the name of the type for which you're specifying the selection set.
export const pageQuery = graphql`
query($path: String!) {
pageData:
markdownRemark(fields: { slug: { eq: $path } }) {
html
fields {
slug
title
}
fileAbsolutePath
}
atoms:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-atoms/"}}) {
...MarkdownRemarkFields
}
molecules:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-molecules/"}}) {
...MarkdownRemarkFields
}
organisms:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-organisms/"}}) {
...MarkdownRemarkFields
}
}
fragment MarkdownRemarkFields on MarkdownRemarkConnection {
edges {
node {
fields {
slug
title
}
}
}
}
`;
Fragments are mentioned in the Gatsby docs here.
I am using https://developer.github.com/v4/
And I have a huge query like this:
query ($login: String!, $first: Int, $after: String) {
user (login: $login){
avatarUrl
login
name,
followers(first: $first, after:$after) {
edges{
cursor
node{
id
name
login
avatarUrl
}
}
totalCount
},
repositories(first: $first) {
edges{
cursor
node{
id
name
}
}
totalCount
}
}
}
But I think it's bad to query huge data from server.
I have followers and repositories pages. So I think split this huge query to small queries is better.
Here is small queries:
followers query:
query($login: String!, $first: Int, $after: String) {
user(login: $login) {
followers(first: $first, after: $after) {
edges {
cursor
node {
id
name
login
avatarUrl
}
}
totalCount
}
}
}
repositories query:
query($login: String!, $first: Int, $after: String) {
user(login: $login) {
repositories(first: $first, after: $after) {
nodes {
id
name
}
totalCount
}
}
}
user query:
query($login: String!, $first: Int) {
user(login: $login) {
avatarUrl
login
name
}
}
Am I correctly? Is it necessary to do this? What's the best practice this situation? Is there any documentation for teaching people how to handle this or told people the best practice?
You can spit your queries into Fragments and in that way you would still only trigger one request and have smaller "queries". Something like this:
Fragment for followers:
fragment followers on User {
followers(first: $first, after: $after) {
edges{
cursor
node{
id
name
login
avatarUrl
}
}
totalCount
},
}
Fragment for repositories:
fragment repositories on User {
repositories(first: $first) {
edges{
cursor
node{
id
name
}
}
totalCount
}
}
Put them all together in the query:
query ($login: String!, $first: Int, $after: String) {
user (login: $login){
avatarUrl
login
name
...followers
...repositories
}
}