Skip to content

Instantly share code, notes, and snippets.

🏠
Working from home

Daniel K. FredyC

🏠
Working from home
  • Hradec Králové, Czechia
Block or report user

Report or block FredyC

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@FredyC
FredyC / RandomGiphy.jsx
Last active Feb 19, 2019
useQuery reusable
View RandomGiphy.jsx
import { observer } from 'mobx-react-lite'
const RandomGiphy = observer(() => {
const settings = useSettings()
const giphy = useRandomGiphy(settings.tag)
return giphy ? <img src={giphy.url} /> : null
})
@FredyC
FredyC / SettingsProvider.jsx
Last active Feb 14, 2019
useQuery with MobX
View SettingsProvider.jsx
import React from 'react'
const context = React.createContext(mobx.observable({
tag: 'kittens'
}))
export const SettingsProvider = ({ children }) => {
// we can employ some persistence here and load previous settings
// for now just return children because context already has state set
return children
@FredyC
FredyC / RandomGiphy.jsx
Last active Mar 8, 2019
useQuery + useContext
View RandomGiphy.jsx
import { useQuery } from 'react-apollo-hooks'
const RandomGiphy = () => {
const { tag } = useSettings()
const { data } = useQuery(
RandomGiphyQuery, {
variables: { tag }
}
}
// handle loading & error states...
View useQuerySimple.js
import { useQuery } from 'react-apollo-hooks'
const RandomGiphy = ({ tag }) => {
const { data } = useQuery(
RandomGiphyQuery, {
variables: { tag }
}
}
// handle loading & error states...
return <img src={data.giphy.random.url} />
@FredyC
FredyC / mutations.jsx
Last active Feb 15, 2019
Mutations with Hooks
View mutations.jsx
// HOC approach was first and some still prefer it for whatever reasons
// Along with recompose you can do some real nasty tricks
const MutateMe = graphql(MutationDocument, { name: 'execute' })(({ execute }) => {
// In comparison it's not a terrible way to execute a mutation
// But naming the mutation with string 😆
return <button onClick={() => execute({ variables: { secretName: 'Me' }})} />
})
// Mutation component is fine for simple cases, but gets ugly otherwise
const MutateMe = () => {
@FredyC
FredyC / formik-state.js
Last active Feb 13, 2019
Formik with MobX #3
View formik-state.js
const formik = mobx.observable({
values: props.initialValues || {},
touched: {},
errors: {},
// scalar values needs to be wrapped into another object
// otherwise after spreading MobX would lost track of it
state: {
isSubmitting: false,
submitError: null
}
@FredyC
FredyC / mobx.js
Last active Aug 7, 2019
Formik with MobX #2
View mobx.js
React.useEffect(() =>
mobx.autorun(() => {
if (props.validate) {
// MobX will see use of formik.values and rerun this function whenever it is mutated
formik.errors = props.validate(formik.values);
}
}), []
);
@FredyC
FredyC / formik-mobx.js
Last active Oct 1, 2019
Formik with MobX
View formik-mobx.js
function useFormik(props) {
// useState to keep the same observable around without recreating it on each render
const [formik] = React.useState(() =>
mobx.observable({
values: props.initialValues || {},
touched: {}
})
)
// just mutate state, this function itself can be considered an action+reducer
View PageTitle.ts
import { Trans } from '@lingui/react'
import React, { Children } from 'react'
interface IProps {
children: ReactNode | string
}
interface IState {
refs: React.RefObject<Trans>[]
@FredyC
FredyC / buildMutation.ts
Last active Mar 7, 2018
Apollo GraphQL with render props
View buildMutation.ts
import { ApolloQueryResult } from 'apollo-client'
import { DocumentNode } from 'graphql'
import React from 'react'
import { graphql } from 'react-apollo'
import { MutationFunc, MutationOpts } from 'react-apollo/types'
interface IQueryProps<TResult, TVariables = {}> {
render(
execute: (variables?: Partial<TVariables>) => Promise<TResult>,
executionOptions?: MutationOpts<TVariables>,
You can’t perform that action at this time.