I am working on a skin care website, and it lets you create skin care routines (Routine in type-defs) with information about how you use your skin care products (ProductUsages in type-defs).
Routine and ProductUsages are many-to-many relations. In type-defs,
type Routine {
id: ID!
# ...
productUsages: [ProductUsage!]
}
type ProductUsage {
id: ID!
# ...
routines: [Routine]
}
On the routine page, urql runs the currentRoutine query like this:
const ROUTINE_QUERY = gql`
query CurrentRoutineQuery($routineId: ID!, $ownerId: ID!) {
currentRoutine(ownerId: $ownerId) {
productUsages {
id
productId
name
brand
category {
id
label
}
frequency
rating
}
id
}
productsWithOtherUsers(routineId: $routineId)
}
`;
(only currentRoutine query is relevant but including everything here just in case)
As you can see, even though it queries a Routine, I'm more interested in ProductUsages in that routine.
Its type-def is as follows:
currentRoutine(ownerId: ID!): Routine
On the same page, users can search and submit new ProductUsages, with the following type-defs.
createProductUsageInfo(input: CreateProductUsageInfoInput): ProductUsage
I run this mutation like
const CREATE_PRODUCT_INFO_MUTATION = gql`
mutation createProductUsageInfo($input: CreateProductUsageInfoInput) {
createProductUsageInfo(input: $input) {
id
weeklyFrequency
dailyFrequency
rating
comment
routines {
id
}
}
}
`;
In the resolver, I create and return a productUsage, and include the related routines entity. Graphcache uses id as the key, so I made sure to query id for the productUsage, and for the included routines.
However, the productUsages in currentRoutine query cache, which I mentioned in the beginning, doesn't reflect the new ProductUsage entry created from this mutation. On the urql cache explorer, productUsages doesn't change.
What could I be doing wrong? I've spent so much time over the last few weeks trying to debug this.
The only thing that I can think of is that the productUsages in currentRoutines result returned from the resolver looks like productUsages: [{productUsage: {id: 1, ...}}, {productUsage: {id: 2, ...}}], so I included the following resolver under Routine to transform it like productUsages: [{id: 1, ...}, {id: 2, ...}].
async productUsages(parent) {
return parent.productUsages.map(
(productUsage) => productUsage.productUsage
);
}
Maybe it doesn't recognize the id because of this? I'm really not sure how to fix this.
It looks like you're missing __typename in the response. This is needed for URQL to match the ID to a key (Product:123). In addition to id, be sure to specify __typename. If you're using graphql-codegen, it has an option to do this automatically.
Your updated query would be:
const ROUTINE_QUERY = gql`
query CurrentRoutineQuery($routineId: ID!, $ownerId: ID!) {
currentRoutine(ownerId: $ownerId) {
productUsages {
id
productId
name
brand
category {
id
label
__typename
}
frequency
rating
__typename
}
id
__typename
}
__typename
productsWithOtherUsers(routineId: $routineId)
}
`;
Then, do the same for your mutation:
const CREATE_PRODUCT_INFO_MUTATION = gql`
mutation createProductUsageInfo($input: CreateProductUsageInfoInput) {
createProductUsageInfo(input: $input) {
id
weeklyFrequency
dailyFrequency
rating
comment
__typename
routines {
id
__typename
}
}
}
`;
Remember, only the fields you fetch in your mutation will update the cache. So in this case, your routines isn't updating any fields, since you're just fetching a list of them. But if that's intended, then that's fine.
Related
I am performing a request for an individual post from Apollo Server / Express backend.
In the Apollo GraphQL sandbox, the query works and retrieves the correct post, however, the query has a red squiggle identifying an error which reads -
Variable "$getPostId" is never used in operation "Query".
The query is as follows -
query Query($getPostId: ID!) {
getPost(id:"20c9b3ac-afe6-4faa-a3f9-e00ef1b38ccf") {
title
author
id
}
}
The schema is as follows -
module.exports = gql`
type Post {
id: ID!
title: String!
author: String!
}
type Query {
getPosts: [Post]!
getPost(id: ID!): Post
}
...
`
The closest post which seems to address a similar problem I could find is here. However, I can't translate the resolution to my problem.
Why is the error showing (particularly when the query runs successfully)? What needs to be done to stop the error from showing?
Many thanks!
It sounds like
query Query($getPostId: ID!) {
getPost(id:"20c9b3ac-afe6-4faa-a3f9-e00ef1b38ccf") {
title
author
id
}
}
is supposed to be
query Query($getPostId: ID!) {
getPost(id: $getPostId) {
title
author
id
}
}
Or if your query is actually meant to hard-code the ID, then you want
query Query {
getPost(id:"20c9b3ac-afe6-4faa-a3f9-e00ef1b38ccf") {
title
author
id
}
}
In my application I am searching for products, then clicking into a product to see more detail about it.
I perform a GraphQL query on each page. The SEARCH query returns type [Product], and the PRODUCT query returns type Product.
// Search page
const SEARCH = gql`
query Search($query: String!) {
searchResults: search(query: $query) {
id
name
images
price
}
}
`
// ProductDetail page
const PRODUCT = gql`
query Product($id: Int!) {
product(id: $id) {
id
name
images
optionSetName
options {
id
images
name
}
price
}
}
`
I have enabled returnPartialData on the PRODUCT query, as some of the fields for that product already exist in the cache from the SEARCH query, and I would like to access them before the server request returns.
I thought I would also have to apply a field policy to reference the pre-existing Product, as I don't know how PRODUCT even knows what its return type is.
However, when I do the following:
const { loading, data: { product } = {} } = useQuery(
PRODUCT,
{ variables: { id: productId, isShallow }, returnPartialData: true }
)
console.log(product)
the following is logged to console (the first is from returnPartialData, the second from server):
Somehow the PRODUCT query has associated itself with the existing Product, without me explicitly writing a cache redirect.
I'm confused how this has occurred? It seems like Apollo must have a reference to the GraphQL schema, and has seen the return type of PRODUCT is Product, then automatically used the id arg to reference the existing product.
Using "#apollo/client": "^3.4.1"
Wow, turns out I had made a field policy ages ago and forgotten about it... xD
typePolicies: {
Query: {
fields: {
product: {
read (_, { args, toReference }) {
return toReference({
__typename: 'Product',
id: args.id
})
}
}
}
}
}
I have a nested component in my app.
At the top of the page, I have a query like
const REPOSITORY_PAGE_QUERY = gql`
query RepositoryPageQuery($name: String!, $owner: String!) {
repository(name: $name, owner: $owner) {
...RepositoryDetailsFragment
}
}
${REPOSITORY_DETAILS_FRAGMENT}
`;
RepositoryDetailsFragment then includes
// list of branches
refs(first: 2, refPrefix: "refs/heads/") {
...BranchesFragment
}
and finally
fragment BranchesFragment on RefConnection {
totalCount
pageInfo {
...PageInfoFragment
}
edges {
node {
id
name
}
}
}
${PAGE_INFO_FRAGMENT}
Obviously, I am not happy, because I need to pass BranchesFragment info around 3 levels deep.
Instead, it would be great if I could read it from the cache directly in my BranchesList component.
I tried to use
client.cache.readFragment({
fragment: BRANCHES_FRAGMENT,
fragmentName: "BranchesFragment"
});
But the problem is that this fragment does not have any id. Is there any way to deal with it and get the fragment info?
Alright, I suddenly came to the solution. Maybe it could be useful for others.
Imagine we have a hierarchy of query -> fragments and components -> subcomponents like this:
RootPageComponent
query
query RepositoryPageQuery(
$name: String!
$owner: String!
$count: Int!
$branchSearchStr: String!
) {
repository(name: $name, owner: $owner) {
...RepositoryDetailsFragment
}
}
${REPOSITORY_DETAILS_FRAGMENT}
component returns the following
<RepositoryDetails repository={data.repository} />
RepositoryDetails
Has a fragment
fragment RepositoryDetailsFragment on Repository {
name
descriptionHTML
defaultBranchRef {
id
name
}
# the branches repository has
refs(first: $count, refPrefix: "refs/heads/", query: $branchSearchStr) {
...BranchesFragment
}
}
${BRANCHES_FRAGMENT}
and returns <BranchesList /> component.
So, instead of passing branch.info from RootPage to RepositoryDetails and then to BranchesList;
You can do the following in BranchesList
const client = useApolloClient();
client.cache.readFragment({
fragment: BRANCHES_FRAGMENT,
fragmentName: "BranchesFragment",
id: "RefConnection:{}" // note this {} - apollow cache adds it when no id is present for the object
})
IMPORTANT!
Make sure to also update type policy for the field and set keyArgs to []
So in this particular case:
RefConnection: {
keyFields: []
...
}
This will give the same result, but you won't have to pass props to nested components and instead can read from cache directly (just like one would do using redux)
I'm struggling to figure out how this should work. I have an application that has a current user, so, the topmost query looks like this:
query AppQuery {
currentUser {
id
email
...Account_currentUser
...AccountEdit_currentUser
}
}
AccountEdit_currentUser is defined this way:
export default createFragmentContainer(AccountEdit, {
currentUser: graphql`
fragment AccountEdit_currentUser on User {
email
name
nickName
}`
})
on the AccountEdit component. That component commits this mutation:
mutation AccountEditMutation($email: String!, $name: String!, $nickName: String!) {
updateAccount(input: {email: $email, name: $name, nickName: $nickName}) {
accountUpdated
currentUser {
id
email
name
nickName
}
}
}
After that happens, the server returns the correct values for email, name, nickName, etc. How should those new values end up in the store? Because it doesn't seem to automatic. Do I need to write a custom updater? and update config? I tried it a few times but I couldn't get anywhere close to something that even throws a reasonable error.
This updating of the store happens automatically and the reason why it wasn't is because the node_ids of the current user in the original query and on the subsequent query were different. Once I made them the same, it started working.
I have the following query:
const getPage = gql`
query Page($path: String!) {
page(path: $path) #rest(type: "Page", path: "{args.path}") {
blocks #type(name: Block) {
name
posts #type(name: Post) {
body
author
}
}
authors #type(name: Author) {
name
}
}
}
In blocks.posts.author there's only an AuthorId. The authors object is containing all the available authors.
I'd like to replace/match the AuthorId with it's corresponding object. Is it possible to do this within one query?
I also wouldn't mind to have a separate query for Author only (fetch will be cached, no new request would be made), but I still don't know how would I match it through 2 queries.
Example API response
{
blocks: [
{
posts: [
{
id: 1,
title: 'My post',
author: 12,
}
]
}
],
authors: [
{
id: 12,
name: 'John Doe'
}
]
}
What I want with 1 query that author inside a post becomes the full author object.
Great question. With GraphQL, you have the power to expand any field and select the exact subfields you want from it, so if you were using GraphQL on your backend as well this would be a non-issue. There are some workarounds you can do here:
If all of the Author objects are in your Apollo cache and you have access to each Author's id, you could use ApolloClient.readFragment to access other properties, like this:
const authorId = ...; // the id of the author
const authorInfo = client.readFragment({
id: authorId,
fragment: gql`
fragment AuthorInfo on Author {
id
name
# anything else you want here
}
`,
});
Although it's worth noting that with your original query in the question, if you have all of the Author objects as a property of the query, you could just use Javascript operations to go from Author id to object.
const authorId = ...; // the id of the author
data.page.authors.find(author => author.id === authorId);
The following should work.
First, capture the author id as a variable using the #export directive. Then add a new field with some name other than author and decorate it with the #rest, using the exported variable inside the path.
So the query would look something like this:
query Page($path: String!) {
page(path: $path) #rest(type: "Page", path: "{args.path}") {
blocks #type(name: Block) {
name
posts #type(name: Post) {
body
author #export(as: "authorId")
authorFull #rest(
path: '/authors/{exportVariables.authorId}'
type: 'Author'
) {
name
}
}
}
authors #type(name: Author) {
name
}
}
}
You can use the fieldNameNormalizer option to rename the author property in the response to a field with a different name (for example, authorId). Ideally, that should still work with the above so you can avoid having a weird field name like authorFull but apollo-link-rest is a bit wonky so no promises.