Confused why returnPartialData works without a field policy in Apollo Client 3 - graphql

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
})
}
}
}
}
}

Related

Mutation not updating Graphcache cache entry in urql

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.

Why I am I getting the same value for a field in all of my array objects for useQuery?

I have a useQuery that returns data of the first item inserted. For context, I have an ecommerce website with grocery products, suppose I add an apple with quantiy of 4. Next, when I add another order with quantiy 10, it adds correctly in the database and I get correct results in the apollo playground. But when I am pulling data using the below code in Apollo client it has all the orders of that user with different order ids but has the quantiy of the first order made for apple.
const { loading, error, data } = useQuery(queries.GET_USER_ORDERS, {
fetchPolicy: "cache-and-network",
variables: {
userId: currentUser.uid,
},
});
Graphql query:
const GET_USER_ORDERS = gql`
query Query($userId: String) {
userOrders(userId: $userId) {
_id
userId
products {
_id
name
price
orderedQuantity
}
status
createdAt
flag
total
}
}
`;
So essentially I am seeing all products, but with quantity of 4 for each. How can I fix this?
Change fetch policy
fetchPolicy: "no-cache",
also check if you are updating this query result after new order placing mutation (if you are it may cause updating with wrong values )
if you set fetchPolicy: "no-cache" you don't have to update query result after mutation

How to use Shopify Graphql ProductVariantsBulkInput

I am trying to bulk update the price on multiple product variants at once. I'm just copying the "interactive" example from Shopify's page
All I did was copy and paste the code and put in my own id's. And of course it does not work.
It looks like this:
mutation productVariantsBulkUpdate($variants: [ProductVariantsBulkInput!]!, $productId: ID!) {
productVariantsBulkUpdate(variants: $variants, productId: $productId) {
product {
cursor
}
productVariants {
cursor
}
userErrors {
code
field
message
}
}
}
With Variables like this:
{
"variants": [
{
id: "gid://shopify/ProductVariant/39369514385591",
price: "50.00"
}
],
"productId": "gid://shopify/Product/6591908577463"
}
I'm getting this error:
Variables are invalid JSON: Unexpected token i in JSON at position 30.
It's OK for me. (with some quick tweaks)
I tweaked the request a little since the cursor is not present in the product/variant object, don't know why Shopify has not updated the example in their docs.
mutation productVariantsBulkUpdate($variants: [ProductVariantsBulkInput!]!, $productId: ID!) {
productVariantsBulkUpdate(variants: $variants, productId: $productId) {
product {
id
}
productVariants {
id
price
}
userErrors {
code
field
message
}
}
}
So try to fix the query and remove the cursor object and check if you are using the proper end-point since the bulk operation is available in the unstable version only if I'm not mistaken.
See the image below showing that the response is OK for me.

Store error: the application attempted to write an object with no provided typename but the store already contains an object

After mutation when I am updating the cache, changes are reflected in UI but getting the below error
Invariant Violation: Store error: the application attempted to write an object with no provided typename but the store already contains an object with typename of ItemCodeConnection for the object of id $ROOT_QUERY.itemCodes({"filter":{"number":10000001}}). The selectionSet that was trying to be written is:
{"kind":"Field","name":{"kind":"Name","value":"itemCodes"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"itemCodes"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"itemCodeTile"},"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}}
GraphQL query:
const CREATE_ITEM_CODE_SPEC = gql`
mutation createItemCodeSpec($input: createItemCodeSpecInput) {
createItemCodeSpecification(input: $input){
__typename
id
itemCode {
number
}
product
spec_class
grade
}
}
`
const GET_ITEM_CODE = gql`
query itemCode($filter: filterInput){
itemCodes(filter: $filter){
itemCodes {
number
type
description
group
item_code_spec {
id
itemCode {
number
}
product
spec_class
grade
}
created_on
created_by
changed_on
changed_by
}
}
}
`
Below is the mutation:
const [mutation, { data, loading, error}] = useMutation(
CREATE_ITEM_CODE_SPEC,
{
update(cache, { data: { createItemCodeSpecification } }){
const currentData = cache.readQuery({
query: GET_ITEM_CODE,
variables: { filter : {number:itemCode} }
})
cache.writeQuery({
query: GET_ITEM_CODE,
variables: { filter : {number:itemCode} },
data: {
...currentData,
itemCodes: {
itemCodes: currentData.itemCodes.itemCodes.map((itemCode, index) => {
return {
...itemCode,
item_code_spec: index === 0? [
...itemCode.item_code_spec,
createItemCodeSpecification
] : itemCode.item_code_spec
}
})
}
}
})
}
}
);
You simply need to add "id" for each subsection of your query. Adding "id" for "itemCodes" in your GET_ITEM_CODE query might solve your problem.
You have fields missing in your response mutation.
Basically, you should make your mutation results have all of the data necessary to update the queries previously fetched.
That’s also why is a best practice to use fragments to share fields among all queries and mutations that are related.
To make it work both query and mutation should have exactly the same fields.
Have a look here to see more in depth how cache updates work:
https://medium.com/free-code-camp/how-to-update-the-apollo-clients-cache-after-a-mutation-79a0df79b840

How to update apollo cache after mutation (query with filter)

I am pretty new to GraphQL. I am using graph.cool in a Vue.js project with apollo.
I am using right now the in-memory cache.
I had previously a simple 'allPosts' query.
And after creating a new one, I used the update() hook and readQuery() + writeQuery()
However I want that logged in users can only see their posts. So I modified the query with a filter.
query userStreams ($ownerId: ID!) {
allStreams(filter: {
owner: {
id: $ownerId
}
}) {
id
name
url
progress
duration
watched
owner {
id
}
}
}
My thought was, that I only need to pass in the userid variable. However this is not working. I am always getting
Error: Can't find field allStreams({"filter":{"owner":{}}}) on object (ROOT_QUERY) undefined.
this.$apollo.mutate({
mutation: CREATE_STREAM,
variables: {
name,
url,
ownerId
},
update: (store, { data: { createStream } }) => {
const data = store.readQuery({
query: USERSTREAMS,
variables: {
id: ownerId
}
})
data.allStreams.push(createStream)
store.writeQuery({
query: USER_STREAMS,
variables: {
id: ownerId
},
data
})
}
})
When you use readQuery or writeQuery, you should use the same variable name. So replace
variables: { id: ownerId }
With
variables: { ownerId }
Also, the reason you are getting an exception is that readQuery throws an exception if the data is not in the store. That happens before the first time you use writeQuery (or get the data with some other query).
You could write some default values to the store before calling this mutation.
You could also use readFragment that returns null instead of throwing an exception. But that would require more changes to your code.

Resources