I create my state link with defaults values, something like this:
const stateLink = withClientState({
cache,
resolvers,
defaults: {
quote: {
__typename: 'Quote',
name: '',
phoneNumber: '',
email: '',
items: []
}
}
})
So my cache should not be empty. Now my resolvers map looks like this:
resolvers = {
Mutation: { ... },
Query: {
quote: (parent, args, { cache }) => {
const query = gql`query getQuote {
quote #client {
name phoneNumber email items
}
}`
const { quote } = cache.readQuery({ query, variables: {} })
return ({ ...quote })
}
}
}
The datasource of my resolvers is the cache right ? so I have to query the cache somehow. But this is not working, I guess it is because I am trying to respond to quote query, and for that I am making another quote query.
I think I should get the quote data without querying for quote, but how ?
I am getting this error:
Can't find field **quote** on object (ROOT_QUERY) undefined
Please help
Just wanted to post the same question - and fortunatly just figured it out.
readQuery-Methode only allows you to query from root. So instead you should use readFragment, because it allows you to access any normalized field in the cache, as long you got it's id (Something like this: GraphQlTypeName:0 typically constructed from the fields: id and __typename ). Your Query-Resolver should then look something like this:
protected resolvers = {
Query: {
getProdConfig: (parent, args, { cache, getCacheKey }) => {
const id = getCacheKey({ __typename: 'ProdConfig', id: args.id });
const fragment = gql`fragment prodConfig on ProdConfig {
id,
apiKey,
backupUrl,
serverUrl,
cache,
valid
}`;
const data = cache.readFragment({ fragment, id })
return ({ ...data });
}
}
and the call from apollo like:
let query = this.$apollo.query(`
query prodConfig($id: Int!) {
getProdConfig(id: $id) #client {
apiKey,
backupUrl,
serverUrl,
cache,
valid
}
}`,
{ id: 0 }
);
Related
I have created page query for my individual product page.
It does goes to an individual product and I want to add a filter like if multiple product has similar SKU I need to show them. Query works fine in Grphiql interface but in code it only show one node.
Grahiql Query
query ($id: String, $sku: String) {
productsCsv(id: {eq: $id}) {
id
name
productCategory
sizes
sku
stock
instock
description
colors
templateKey
price
discount
fields {
slug
}
}
allProductsCsv(filter: {sku: {regex: $sku}, instock: {eq: "TRUE"}}) {
edges {
node {
id
instock
stock
sku
colors
sizes
}
}
}
}
In query Variables section, I am passing variable like this
{
"sku": "/DW20DK18/"
}
allProductCsv only resulted in one node in gatsby though it returns multiple nodes in graphiql
Gatsby-node.js
const { createFilePath } = require("gatsby-source-filesystem")
const path = require(`path`)
const onCreateNode = ({node,actions,getNode}) => {
const {createNodeField} = actions
if(node.internal.type === `MarkdownRemark`) {
const value = createFilePath({node, getNode})
createNodeField({
name:`slug`,
node,
value
})
}
if(node.internal.type === `ProductsCsv`) {
const value = node.name
const processedSlug = value.replace(/\s+/g, '-').toLowerCase();
createNodeField({
name:`slug`,
node,
value: processedSlug
})
}
}
const createPages = async ({actions,graphql}) => {
const {createPage} = actions
const result = await graphql(`
{
allMarkdownRemark {
edges {
node {
frontmatter {
productColors
age
}
}
}
}
allProductsCsv {
edges {
node {
id
sku
fields{
slug
}
templateKey
productCategory
}
}
}
}
`)
if(result.errors){
console.error(result.errors)
}
result.data.allProductsCsv.edges.forEach(({ node }) => {
console.log(node.productCategory)
createPage({
path: `${String(node.productCategory)}/${node.fields.slug}`,
component: path.resolve(
`src/templates/${String(node.templateKey)}.js`
),
context: {
id: node.id,
sku: `/${node.sku}/`.toString(). //Passing SKU from Here
}
})
})
}
module.exports = {
/*
1. function for how to create page
2. On create node
*/
onCreateNode,
createPages
};
I am passing SKU along side of ID in Context in gatsby-node.js
Your workaround should work except for the fact that you are using a template literal to hold a dynamic regular expression. For this approach I would try to do something like:
context: {
id: node.id,
sku: new RegExp(String.raw `${node.sku}`, 'i'), //add other flags if needed
}
Alternatively try:
new RegExp(node.sku, 'i').toString()
The RegExp constructor should do the trick for this use-case with a little trick to force a raw string (since the comparison within GraphQL needs to be represented by a string value).
I am beating my head against a wall. I have updated to Apollo 3, and cannot figure out how to migrate an updateQuery to a typePolicy. I am doing basic continuation based pagination, and this is how I used to merged the results of fetchMore:
await fetchMore({
query: MessagesByThreadIDQuery,
variables: {
threadId: threadId,
limit: Configuration.MessagePageSize,
continuation: token
},
updateQuery: (prev, curr) => {
// Extract our updated message page.
const last = prev.messagesByThreadId.messages ?? []
const next = curr.fetchMoreResult?.messagesByThreadId.messages ?? []
return {
messagesByThreadId: {
__typename: 'MessagesContinuation',
messages: [...last, ...next],
continuation: curr.fetchMoreResult?.messagesByThreadId.continuation
}
}
}
I have made an attempt to write the merge typePolicy myself, but it just continually loads and throws errors about duplicate identifiers in the Apollo cache. Here is what my typePolicy looks like for my query.
typePolicies: {
Query: {
fields: {
messagesByThreadId: {
keyArgs: false,
merge: (existing, incoming, args): IMessagesContinuation => {
const typedExisting: IMessagesContinuation | undefined = existing
const typedIncoming: IMessagesContinuation | undefined = incoming
const existingMessages = (typedExisting?.messages ?? [])
const incomingMessages = (typedIncoming?.messages ?? [])
const result = existing ? {
__typename: 'MessageContinuation',
messages: [...existingMessages, ...incomingMessages],
continuation: typedIncoming?.continuation
} : incoming
return result
}
}
}
}
}
So I was able to solve my use-case. It seems way harder than it really needs to be. I essentially have to attempt to locate existing items matching the incoming and overwrite them, as well as add any new items that don't yet exist in the cache.
I also have to only apply this logic if a continuation token was provided, because if it's null or undefined, I should just use the incoming value because that indicates that we are doing an initial load.
My document is shaped like this:
{
"items": [{ id: string, ...others }],
"continuation": "some_token_value"
}
I created a generic type policy that I can use for all my documents that have a similar shape. It allows me to specify the name of the items property, what the key args are that I want to cache on, and the name of the graphql type.
export function ContinuationPolicy(keyArgs: Array<string>, itemPropertyKey: string, typeName: string) {
return {
keyArgs,
merge(existing: any, incoming: any, args: any) {
if (!!existing && !!args.args?.continuation) {
const existingItems = (existing ? existing[itemPropertyKey] : [])
const incomingItems = (incoming ? incoming[itemPropertyKey] : [])
let items: Array<any> = [...existingItems]
for (let i = 0; i < incomingItems.length; i++) {
const current = incomingItems[i] as any
const found = items.findIndex(m => m.__ref === current.__ref)
if (found > -1) {
items[found] === current
} else {
items = [...items, current]
}
}
// This new data is a continuation of the last data.
return {
__typename: typeName,
[itemPropertyKey]: items,
continuation: incoming.continuation
}
} else {
// When we have no existing data in the cache, we'll just use the incoming data.
return incoming
}
}
}
}
I used to be able to pass the Username and UserID parameter from the URI using the below code on Webchat:
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var user = urlParams.get('userid')
var usern = urlParams.get('username')
and I pass it on to the Webchat using the below code:
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token: }),
store,
userID: user,
username: usern,
styleOptions
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
Now this works perfectly before when I was using the usual Webchat for the Botframework. Its no longer working when I started using ReachJS on the Webchat. How do I pass this parameter using the Webchat Hooks API? I tried specifying it using the below code but does not work.
ReactDOM.render(
<Composer directLine={window.WebChat.createDirectLine({ token: })}>
<BasicWebChat />
<SendMessageOnConnect />
<user />
<usern />
</Composer>,
document.getElementById('webchat')
);
This works in my React project. You're implementation is different, but this should put you in the right direction. You can see in the listed activity that the user name is updated to 'Steve'. In my case, id is not updated because I am generating an id with the token. When an id is generated via Direct Line with the token, it takes precedence over any id's passed via Web Chat.
import React from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';
export default class WebChatView extends React.Component {
constructor(props) {
super(props);
this.state = {
user: '',
usern: ''
};
}
componentDidMount() {
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var user = urlParams.get('userid');
var usern = urlParams.get('username');
this.setState({ user: user, usern: usern })
this.fetchToken();
}
async fetchToken() {
const res = await fetch('http://localhost:3500/directline/token', { method: 'POST' });
const { token } = await res.json();
this.setState(() => ({
directLine: createDirectLine({ token: token })
}));
}
render() {
return (
this.state.directLine ?
<ReactWebChat
directLine={this.state.directLine}
userID={this.state.user}
username={this.state.usern}
/>
:
<div>Connecting to bot…</div>
)
}
}
Activity output:
{
type: 'message',
id: '4wpfp......-f|0000002',
timestamp: 2020-09-02T21:39:01.197Z,
serviceUrl: 'https://directline.botframework.com/',
channelId: 'directline',
from: { id: 'dl_15990824712200.ruhpue7p1j', name: 'Steve', role: 'user' },
conversation: { id: '4wpfp......-f' },
recipient: { id: 'botberg#QaeuoeEamLg', name: 'Bot' },
textFormat: 'plain',
locale: 'en-US',
text: 'Hi',
entities: [
{
type: 'ClientCapabilities',
requiresBotState: true,
supportsListening: true,
supportsTts: true
}
],
channelData: {
clientActivityID: '1599082740974mexnvax1jq',
clientTimestamp: '2020-09-02T21:39:00.974Z'
},
rawTimestamp: '2020-09-02T21:39:01.1971653Z',
callerId: 'urn:botframework:azure'
}
Hope of help!
You can try with useParams() hook instead as:
let { userid, username } = useParams();
Or rename as the following:
let { userid: user, username: usern } = useParams();
Read further in the documentation here which states:
useParams returns an object of key/value pairs of URL parameters. Use it to access match.params of the current <Route>.
Or you can also use useLocation() hook as:
const { search } = useLocation();
const { userid, username } = search;
Read from the documentation:
The useLocation hook returns the location object that represents the current URL. You can think about it like a useState that returns a new location whenever the URL changes.
When I'm adding docs to elasticsearch with _id set I get:
Field [_id] is a metadata field and cannot be added inside a document. Use the index API request parameters.
Using client.bulk
const body = dataset.flatMap(doc => [{ index: { _index: 'myindex' } }, doc])
const { body: bulkResponse } = await client.bulk({ refresh: true, body })
I don't see a place to put the _id in the parameters.
https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/api-reference.html
Am I supposed to use a different method?
Thanks.
It needs to be inside the command part, but you also need to remove it from the source document in doc:
here
|
v
const body = dataset.flatMap(doc => [{ index: { _index: 'myindex', _id: doc._id } }, doc])
const { body: bulkResponse } = await client.bulk({ refresh: true, body })
I'm trying to concatenate all the query params string that I have into a one final query including all params but I keep getting this result :
_filter=0=((startDate=ge=2019-09-30T22:00:00.000Z);(endDate=le=2019-10-
03T22:00:00.000Z));1=
(category=eq=Warning,category=eq=Error);&_limit=50&_sort=asc
with the annoying 0=, 1=, 2=, ....
The expected result is to be like that :
_filter=((startDate=ge=2019-10-06T12:39:05.000Z;endDate=le=2019-10-
07T23:59:59.999Z);(category=eq=ALERT,category=eq=META))"
Here is my code:
generateQueryString(obj: any) {
let query = [];
if (obj.startDate && obj.endDate) {
query = query.concat(this.buildDateQueryString(obj.startDate, obj.endDate)
);
}
if (obj.category) {
query = query.concat(this.buildCategoryQueryString(obj.category));
}
return query;
}
Let us assume you want pass some data like
const userData = {
firstName: 'Arpit',
lastName: 'Patel'
}
You can pass this object into Query Params like this.
this.router.navigate(['/dashboard/details'], { queryParams: { user: JSON.stringify(userData) } });
Then extract this Object in next component which is called as below.
this.route.queryParams.subscribe(params => {
const user= JSON.parse(params.user);
console.log(user);
});
This will result in JSON object. You can access it directly.